Two cameras appear if reloading implement with next js

[paresiqbal]

Describe the Question
On first load of web it's only shows one camera, as intended. but when reloading it will shows two cameras, even when reload on other page. I have to restart the web to make the camera normal again
On every following load two cameras appear (see attachment)

Context about your web application
Windows 11
happens in Chrome, Firefox and Edge
"next": "^14.1.1",
"react": "^18",

  const { presensiData } = usePresensi();

  const qrRef = useRef<HTMLDivElement>(null);
  const [qrData, setQrData] = useState<QRData | null>(null);
  const [apiResponse, setApiResponse] = useState<ApiResponse | null>(null);

  const onScanSuccess = useCallback(
    (decodedText: string, decodedResult: any) => {
      console.log(`Code matched = ${decodedText}`, decodedResult);
      parseQRData(decodedText);
    },
    []
  );

  useEffect(() => {
    let scanner: Html5QrcodeScanner | null = null;

    if (qrRef.current) {
      scanner = new Html5QrcodeScanner(
        qrRef.current.id,
        { fps: 10, qrbox: { width: 250, height: 250 } },
        false
      );
      scanner.render(onScanSuccess, onScanFailure);
    }

    return () => {
      scanner?.clear();
    };
  }, [onScanSuccess]);

     <div className="flex flex-col justify-center items-center">
        <div id="reader" ref={qrRef} style={{ width: "350px" }}></div>
        {apiResponse && (
          <div>
            <p>
              Status:
              {apiResponse.message || apiResponse.error || "Error"}
            </p>
          </div>
        )}
      </div>

Additional context
Add any other context about the problem here.

[ratnakarm]

This is because of Strict Mode
Strict Mode enables the following checks in development:
Your components will re-render an extra time to find bugs caused by impure rendering.
Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
Your components will be checked for usage of deprecated APIs.
All of these checks are development-only and do not impact the production build.

you can remove strict mode in index.js

root.render(
    <App />
)

About strictmode in react