ViewField binding issue

[asifka]

In the below code i am using viewField in user interface its working fine as expected but when submit the event_id field is null
filament3.X
please help.

            Fieldset::make('Basic Info')->schema([
                // Select::make('event_id')->relationship('event', 'event_name')
                //     ->label('Event')->required()
                //     ->options($events->pluck('event_name', 'id'))
                //     ->searchable()->native(false)->columnSpan(3),

                ViewField::make('event_id')
                ->view('filament.components.event-dropdown') 
                ->label('Event')
                ->statePath('event_id')
                ->columnSpan(3) 
                ->viewData([
                    'events' => $events,
                    'selectedEventId' => $record?->event_id ?? null,
                ]),
                
     event-dropdown blade
     
     
     <div 
x-data="{
    open: false,
    selected: null,
    events: {{ Js::from($events->map(fn ($event) => [
        'id' => $event->id,
        'name' => $event->event_name,
        'logo' => asset('storage/' . $event->logo),
    ])->toArray()) }},
    selectedEventId: {{ Js::from($selectedEventId ?? null) }},
}"
x-init="
    selected = events.find(event => event.id == selectedEventId) || null;
"
class="relative"

<!-- Dropdown Trigger -->
<button 
    type="button" 
    class="block w-full text-left px-4 py-2 border rounded-md shadow-sm focus:outline-none focus:ring focus:border-blue-300"
    @click="open = !open"
>
    <template x-if="selected">
        <div class="flex items-center gap-4">
            <img :src="selected.logo" alt="Event Logo" class="w-28 h-10">
            <!-- <span x-text="selected.name"></span> -->
        </div>
    </template>
    <template x-if="!selected">
        <span>Select an Event</span>
    </template>
</button>

<!-- Dropdown Menu -->
<div 
    x-show="open" 
    @click.outside="open = false" 
    class="absolute z-10 mt-2 w-full bg-white border rounded-md shadow-lg max-h-60 overflow-auto"
>
    <template x-for="event in events" :key="event.id">
        <div 
            @click="selected = event; open = false" 
            class="flex items-center gap-4 px-4 py-2 cursor-pointer hover:bg-gray-100"
        >
            <img :src="event.logo" alt="" class="w-28 h-10">
            <span x-text="'(' + event.name + ')'"></span>
        </div>
    </template>
</div>

<!-- Hidden Input Field -->
<!-- <input type="hidden" name="event_id" :value="selected ? selected.id : ''"> -->
<input 
    type="hidden" 
    x-bind:value="selected ? selected.id : ''" 
    wire:model.defer="{{ $getStatePath() }}"
>

<!-- Debugging: Show the current value -->

Selected ID (Alpine.js): Livewire Value (JS Console): Check Livewire Value