script in modalContent(view('qr-scanner.php')) not working

            Actions\Action::make('openModal')
                ->modalContent(view('filament-custom.qr-scanner'))
                ->mountUsing(function () {
                    // Dispatch the custom event to initialize the QR scanner
                    $this->dispatch('initialize-qr-scanner');
                })
                ->action(function (array $data): void {
                    // Handle the action when the modal is submitted
                    // For example, you can process the $data here
                }),

<div class="border border-primary-500 w-[300px] h-[300px] mx-auto">
    <div id="reader"></div>
</div>

<script src="https://unpkg.com/html5-qrcode"></script>
<script>
    console.log('asbc')
    function onScanSuccess(decodedText, decodedResult) {
        // handle the scanned code as you like, for example:
        console.log(`Code matched = ${decodedText}`, decodedResult);
        document.getElementById("outputData").innerText = decodedText;
    }

    function onScanFailure(error) {
        // handle scan failure, usually better to ignore and keep scanning.
        // for example:
        console.warn(`Code scan error = ${error}`);
    }

    document.addEventListener("DOMContentLoaded", function() {
        const { Html5QrcodeScanner } = window;
        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: {width: 250, height: 250} },
            /* verbose= */ false);
        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    });

    document.addEventListener('initialize-qr-scanner', function() {
        const { Html5QrcodeScanner } = window;
        let html5QrcodeScanner = new Html5QrcodeScanner(
            "reader",
            { fps: 10, qrbox: {width: 250, height: 250} },
            /* verbose= */ false);
        html5QrcodeScanner.render(onScanSuccess, onScanFailure);
    });
</script>