issue using datepicker inside laravel livewire

hello, im trying to use github.com / Laratipsofficial / laravel-flatpickr?tab=readme-ov-file and i tried with the bootstrap package or even flatpickr package etc... when i add the date input in any page its working as date input when i add it inside livewire/step3.blade.php it displaying like empty input. here my code:

@include('flatpickr::components.style')
</head>
 
 

 
     <div class="container">
         <div class="row">
             <div class="col-md-12">
                 <div class="section-head text-center">
                     <div class="section-subtitle">Welcome, {{ $customer->name }}</div>
                     <div class="section-title black"></div>
                 </div>
             </div>
         </div>
         
         <div class="row">
             @foreach ($barbers as $barber)
                 <div class="col-lg-4 col-md-4 col-sm-6 mb-4">
                     <a href="#" wire:click.prevent="submitStep3({{ $barber->id }})">
                         <div class="team-card">
                             <div class="team-img">
                                 @if ($barber->image_url)
                                     <img src="{{ $barber->image_url }}" alt="{{ $barber->name }}" class="w-100">
                                 @else
                                     <img src="{{ asset('img/kids.jpg') }}" alt="{{ $barber->name }}" class="w-100">
                                 @endif
                             </div>
                             <div class="team-content">
                                 <h3 class="team-title">{{ $barber->name }} <span>{{ $barber->specialty }}</span></h3>
                                 <div class="social">
                                     {{-- Add your social links if needed --}}
                                 </div>
                             </div>
                             <div class="title-box">
                                 <h3 class="mb-0">{{ $barber->name }} <span>{{ $barber->specialty }}</span></h3>
                             </div>
                         </div>
                     </a>
                 </div>
             @endforeach
         </div>
         
     </div>
 </section>
    
 @if ($selectedBarber)
 <div>
     Total Duration: {{ $totalDuration }} minutes
    
 </div>
     <section class="selected-barber-services">
         <div class="container">
             <h4>Pick the services offered by: {{ $selectedBarber->name }}</h4>
             <ul>
                 @foreach ($selectedBarberServices as $service)
                 <li class="selected-service {{ in_array($service->id, $selectedServiceIds) ? 'selected' : '' }}"
                     wire:click="toggleService({{ $service->id }})">
                     <span class="service-name">{{ $service->name }}</span>
                 </li>
             @endforeach
             <div>
                 <h4>Working Days and Times for {{ $selectedBarber->name }}</h4>
                 <ul>
                     @foreach ($workdays as $workday)
                         <li>{{ ucfirst($workday['day_of_week']) }}: {{ $workday['start_time'] }} - {{ $workday['end_time'] }}</li>
                     @endforeach
            
                 </ul>
             </div>
             </ul>
         </div>
     </section>
     <div>

      <input type="text" id="datepicker" class="form-control">

     </div>
    
      
 @endif
 <x-flatpickr::script
 url="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"

/> @include('flatpickr::components.script')