Using JS in a filament custom form component

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <!-- Interact with the `state` property in Alpine.js -->

        <input type="file" id="directoryInput" wire:model="{{ $getStatePath() }}.folder[]"  webkitdirectory multiple>
        <div wire:loading wire:target="{{ $getStatePath() }}.folder[]">Uploading...</div>




    </div>
    <script>
        console.log("hello");
        document.addEventListener('livewire:load', function () {
            console.log("hello");

        })
        document.getElementById("directoryInput").addEventListener(
            "change",
            (event) => {
                var names = [];
                for (const file of event.target.files) {
                    names.push(file.webkitRelativePath);
                }

                console.log(names);

            },
            false,
        );
    </script>

</x-dynamic-component>