How to properly access relation data in ViewField

Hi, i am using a standalone form builder, i have below ViewField

    ViewField::make('bin.bin_description')
      ->label('Bin')
      ->view('filament.forms.fields.span'),

    ViewField::make('bin.bin_description')
      ->label('Bin')
      ->view('filament.forms.fields.span'),

and this is the component :

  <x-dynamic-component 
    :component="$getFieldWrapperView()" 
    :id="$getId()" 
    :label="$getLabel()" 
    :label-sr-only="$isLabelHidden()" 
    :helper-text="$getHelperText()" 
    :hint="$getHint()" 
    :hint-action="$getHintAction()" 
    :hint-color="$getHintColor()" 
    :hint-icon="$getHintIcon()" 
    :required="$isRequired()" 
    :state-path="$getStatePath()"
  >
  <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }">
    <span x-text="state ? state : 'abc'"></span>
  </div>
  </x-dynamic-component>

  <x-dynamic-component 
    :component="$getFieldWrapperView()" 
    :id="$getId()" 
    :label="$getLabel()" 
    :label-sr-only="$isLabelHidden()" 
    :helper-text="$getHelperText()" 
    :hint="$getHint()" 
    :hint-action="$getHintAction()" 
    :hint-color="$getHintColor()" 
    :hint-icon="$getHintIcon()" 
    :required="$isRequired()" 
    :state-path="$getStatePath()"
  >
  <div x-data="{ state: $wire.entangle('{{ $getStatePath() }}').defer }">
    <span x-text="state ? state : 'abc'"></span>
  </div>
  </x-dynamic-component>