Livewire Removing Nested component

<livewire:form.select2 
  name="driver" 
  label="Driver" 
  :items="$drivers->pluck('full_name','id')"
                                   wire:model="driver" 
wire:key="unique-key"/>

//select2.php
class Select2 extends Component
{
    public $class, $name, $label;

    public $items;

    #[Modelable]
    public $selectedValue;

    public function render()
    {
        return view('livewire.form.select2');
    }
}

//select2.blade.php
<div class="{{$class ?? 'col-12 col-sm-6'}}" wire:ignore wire:key="{{$name}}">
    <div>
        <label class="form-label" for="{{$name}}">{{$label}}</label>
        <select class="select2 form-control form-select" id="{{$name}}"
                wire:model="selectedValue">
            <option value="" wire:key="{{$label}}">Select {{$label}}</option>
            @foreach($items as $key => $value)
                <option value="{{$key}}" wire:key="{{$name}}-{{$value}}">{{$value}}</option>
            @endforeach
        </select>
    </div>
</div>
@script
<script>
    let selectElement = $('#{{$name}}');
    if (selectElement.length) {
        selectElement.select2().wrap('<div class="position-relative"></div>').select2({
            dropdownParent: selectElement.parent(),
        }).on('change', e => {
            @this.
            set('selectedValue', e.target.value);
        });
    }
</script>
@endscript

i'm having this selec2 component inside livewire modal component..when i hit submit this element got removed from dom and shows component not found.I'm using livewire3