How to make Next.JS QR Code Scanner fits whole screen like many mobile app?

Question

What I really want is just a QR Code Reader page that fits the whole screen with no white space left and an overlay for the scanning space. So If anyone has any alternative from their experiences or suggestion I'd be very appreciated.

I tried various library including this one react-qr-reader This one is kinda convenient since you can custom viewFinder (overlay or user interface) to suit the design given but the problem is I'm having trouble fitting the whole screen of a mobile phone. I tried putting it inside a div and increased the width but then again the empty space changes depending on the phone model and also the picture quality decreases there are also attributes like videoContainerStyle, videoStyle, containerStyle.

`import { useState } from 'react';
import { QrReader } from 'react-qr-reader';



const Test = () => {
  const [data, setData] = useState<string>('No result');

  return (
    <>
      <div style={{ }}>
        <QrReader
          onResult={(result: any, error: any) => {
            if (result) {
              setData(result?.text);
            }

            if (error) {
              console.info(error);
            }
          }}
          constraints={{ 'facingMode': 'environment' }}


        />
      </div>
      <p>{data}</p>
    </>
  );
};

export default Test;`