Laravel Livewire Select2 issue with new app - laravel

Question

I have standard TALL Stack new APP
& I am trying to make select2 from Laravel 8 & Livewire 2
I have follow this
in my live-wire blade I have added this
<div class="w-1/3 px-3 mb-5" wire:ignore>
<x-jet-label for="uid" value="{{ __('Users') }}" />
<select class="select2 w-full rounded-md border border-gray-200 p-2 focus:outline-none focus:border-gray-500" id="uid" wire:model.defer="uid">
<option value="" selected>Choose User</option>
#if(isset($users))
#foreach($users as $user)
<option value="{{ $user->id }}">{{ $user->name }}</option>
#endforeach
#endif
</select>
<x-jet-input-error for="uid" class="mt-2" />
</div>
at the bottom of this page
#push('scripts')
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
#endpush
Its not loading Select2 but there is no error in console.
Also I have added
#livewireStyles
#livewireScripts
in layout blade also.
Do I need to add any extra CSS or JS or what I am doing wrong.
Even I have added this in my blade but still not working
#section('style')
#endsection
#section('scripts')
<script type="text/javascript">
$(document).ready(function () {
$('#FirstOption').select2({
placeholder: 'Select an option',
});
});
</script>
#endsection
Thanks