Adding a crop box on video element to scan QR code

Question

I have used "@zxing/library" to scan QR code. Now I want to show a frame box to specify the QR scan area instead of whole video box. I see a function name drawFrameOnCanvas() but unable to find an example of utilising that function for this purpose.

Here is my QR scan component:

import { BrowserMultiFormatReader } from "@zxing/library"

const videoRef = useRef<HTMLVideoElement>(null)
const reader = useRef(new BrowserMultiFormatReader())

reader.current.decodeOnceFromConstraints(
        {
          audio: false,
          video: {
            facingMode: "environment",
          }
        },
        videoRef.current
      )
      .then((result) => {
        if (result) {
          console.log(result.getText())
        }
      })
      .catch((err) => {
        if (err) console.log(err)
      })

return(

  <Grid>
      <video ref={videoRef} width="400px" height="400px" />
  </Grid>
)

Anyone familiar how to achieve the above stated functionality??