Im trying to create a QR code generator and scanner/reader using Next JS. The issue is that the indicator appears, however, the screen is blank and the indicator does not show a camera.

Im using localhost:3000, im not sure if this is related to permission issues.

'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import QrReader from 'react-web-qr-reader';
import 'tailwindcss/tailwind.css';

const QRScanner = () => {
  const [data, setData] = useState("No result");
  const delay = 500;

  const previewStyle = {
    height: 240,
    width: 320,
  };

  const [result, setResult] = useState('No result');

  const handleScan = (result) => {
    if (result) {
      setResult(result);
    }
  };

  const handleError = (error) => {
    console.log(error);
  };

  return (
    <>
      <QrReader
        delay={delay}
        style={previewStyle}
        onError={handleError}
        onScan={handleScan}
      />
      <p className='p-8'>{result}</p>
    </>
  );
};

export default QRScanner;

Any help appreciated