Intentando integrar con air-datepicker

resources/js/app.js

@@ -1 +1,20 @@
 import './bootstrap';
+import 'air-datepicker/air-datepicker.css';
+import {Alpine} from '../../vendor/livewire/livewire/dist/livewire.esm';
+import AirDatepicker from "air-datepicker";
+import localeEs from 'air-datepicker/locale/es';
+
+Alpine.data('datepicker', () => ({
+    init() {
+        new AirDatepicker(this.$el, {
+            locale: localeEs,
+            autoClose: true,
+            buttons: 'clear',
+            onSelect: ({date}) => {
+                this.$el.dispatchEvent(new Event('input'));
+            }
+        })
+    }
+}))
+
+Livewire.start();

resources/views/components/layouts/app.blade.php

@@ -30,7 +30,7 @@
         {{ $slot }}
     </main>
 </div>
-@livewireScripts
+@livewireScriptConfig
 </body>
 
 </html>

resources/views/livewire/cajas/index.blade.php

@@ -9,7 +9,15 @@
     </div>
 
     <div class="flex mb-4">
-        <x-date label="Fecha" wire:model.live="searchFecha" helpers/>
+        <label class="form-control">
+            <div class="label">
+                <span class="label-text">Fecha</span>
+            </div>
+            <input type="date" class="input input-bordered" wire:model.live="searchFecha"/>
+            @error('fecha')
+            <p class="text-sm text-error">{{ $message }}</p>
+            @enderror
+        </label>
     </div>
 
     <div class="overflox-x-auto">
@@ -54,7 +62,7 @@
                 <div class="label">
                     <span class="label-text">Fecha</span>
                 </div>
-                <input type="date" class="input input-bordered" wire:model="fecha"/>
+                <input type="date" class="input input-bordered" wire:model.live="fecha"/>
                 @error('fecha')
                 <p class="text-sm text-error">{{ $message }}</p>
                 @enderror