Camera does not stop scanning

[srikanth716]

When starting the QR code scanner and then attempting to stop the scanning before it completes (e.g., by clicking the back button), the following error occurs:
TypeError: Cannot read properties of undefined (reading 'stop')

Steps to Reproduce:

Initialize QR Scanning:
Call the initiateQrScanning(timer) function to start the QR code scanner.

Attempt to Stop Scanning:
Before the scanning operation completes, call the terminateScanning() function (for example, by navigating away from the page or clicking the back button).

Expected Behavior:
The QR scanner should stop gracefully without throwing any errors, even if it is stopped before the scanning is complete.

Actual Behavior:
The following error is encountered:

TypeError: Cannot read properties of undefined (reading 'stop')
    at terminateScanning (path/to/your/hook/file.js:line:column)
    at path/to/your/component/file.js:line:column
    ...

Code Snippet:

export const useQRScanner = () => {
  const dispatch = useAppDispatch();
  const config = {
    fps: 10,
    disableFlip: false,
    aspectRatio: 1.0,
  };

  let html5QrCode;
  const initiateQrScanning = (timer) => {
    if (!html5QrCode?.getState()) {
      html5QrCode = new Html5Qrcode("reader");
      const qrCodeSuccessCallback = (decodedText) => {
        dispatch(
          verificationInit({
            qrReadResult: { qrData: decodedText, status: "SUCCESS" },
            flow: "SCAN",
          })
        );
        clearTimeout(timer);
        html5QrCode.stop();
      };

      html5QrCode
        .start({ facingMode: "environment" }, config, qrCodeSuccessCallback)
        .catch((e) => {
          console.error("Error occurred:", e.message);
          clearTimeout(timer);
          html5QrCode.stop();
        });
    }
  };

  const terminateScanning = async () => html5QrCode.stop();

  return { initiateQrScanning, terminateScanning };
};