problem in using select2 in my laravel project - php

Question

my link stylesheet is
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard-rtl/">
<link href="https://fonts.googleapis.com/css?family=Open%20Sans:300,400,400italic,600,600italic,700,700italic&subset=latin,latin-ext" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<!-- Bootstrap core CSS -->
<link href="{{ asset('assets/dist/css/bootstrap.rtl.min.css') }}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic&subset=latin,latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open%20Sans:300,400,400italic,600,600italic,700,700italic&subset=latin,latin-ext" rel="stylesheet">
<link href="{{ asset('assets/dist/css/dashboard.rtl.css') }}" rel="stylesheet">
<link href="{{ asset('assets/dist/css/font-awesome.min.css') }}" rel="stylesheet">
#livewireStyles
and script tags are
<script src="{{ asset('assets/dist/js/bootstrap.bundle.min.js') }}"></script>
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js" integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI" crossorigin="anonymous"></script><script src="dashboard.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkeLMlsiwzp6b3Gnaxd86lvakimwGA6UA&callback=initMap"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
#livewireScripts
#stack('scripts')
and my view is
<form class="form-horizontal" wire:submit.prevent="storeServices">
<div class="form-group">
<label class="col-md-4 control-label">اختار العيادة</label><br/>
<div class="col-md-4" wire:ignore>
<select class="selectClinic form-control" name="clinics[]" multiple="multiple">
#foreach($clinics as $clinic)
<option value="{{$clinic->id}}">{{$clinic->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">اختارالخدمات</label><br/>
<div class="col-md-4" wire:ignore>
<select class="form-control" name="services[]" id="selectServices" multiple="multiple">
#foreach($services as $service)
<option value="{{$service->id}}">{{$service->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">حفظ</button>
</div>
</div>
</form>
the view must not be like this there is no feel for select2 in my laravel view file and do not understand the reason for this i tried alot of things and have the same problem