Dynamic Drowpdown on Select2 livewire laravel 8 - jquery-select2

Question

I build a dynamic dropdown in select option but when i implement a select2 package it not work. Here is my code. The value of type not passing to the court select.
here is my Blade.php
{{$selectedType}}
<div class="row g-3 mb-3">
<div class="col-md">
<div class="form-floating" wire:ignore>
<select class="form-select" id="type" wire:model="selectedType" required>
<option value="">Select Court Type</option>
#foreach($types as $type)
<option value="{{$type->id}}">{{$type->court_type_name}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Type</label>
</div>
</div>
#if (!is_null($courts))
<div class="col-md">
<div class="form-floating" wire:ignore>
<select class="form-select" wire:model="selectedCourt" required>
<option value="">Select Court Location</option>
#foreach($courts as $court)
<option value="{{$court->id}}">{{$court->court_name}}, {{$court->province}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Court Location</label>
</div>
</div>
#endif
</div>
The livewire components works perfectly but in select2 it not work
public function render()
{
$types = Type::All();
$periods = Period::All();
return view('livewire.collection.add', compact('types', 'periods'));
}
public function updatedSelectedType($court_id)
{
$this->courts = Court::where('court_type', $court_id)->orderBy('court_name')->get();
}
public function updatedSelectedCourt($clerk_id)
{
$this->clerks = Clerk::where('court', $clerk_id)->get();
}
Select2
<script>
$(document).ready(function () {
$('.form-select').select2();
$('#type').on('change', function (e) {
var data = $('#type').select2("val");
#this.set('selectedType', data);
});
$('#court').on('change', function (e) {
var data = $('#court').select2("val");
#this.set('selectedCourt', data);
});
});
</script>
Nothing happen when clicked.

Answer 1

I solve select2 element in Livewire like this.
<div class="form-floating">
<select class="form-select" wire:model="selectedCourt">
<option value="">Select Court Location</option>
#foreach($courts as $court)
<option value="{{$court->id}}">{{$court->court_name}}</option>
#endforeach
</select>
<label for="floatingInputGrid">Court Location</label>
</div>
//
<script>
$(document).ready(function() {
window.initSelectDrop=()=>{
$('.form-select').select2({
placeholder: '{{ __('locale.Select') }}',
allowClear: true
});
initSelectDrop();
$('.form-select').on('change', function (e) {
livewire.emit('selectedItemCourt', e.target.value)
});
window.livewire.on('select2',()=>{
initSelectDrop();
});
});
</script>
in component
public function hydrate()
{
$this->emit('select2');
}
public $listeners = ['selectedItemCourt'];
//.....
public function selectedItemCourt($value)
{
dd($value);
$this->selectedCourt = $value;
}