Getting video warning while loading video from BrowserCodeReader

Question

Implemented QR scanner component with @zxing/library and getting warning on browser while video is loaded. Any idea why they are showing and how to overcome these warnings?

Here is my component and warning on browser console:

import { BrowserMultiFormatReader } from "@zxing/library"

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

useEffect(() => {
 if (videoRef.current) {
    videoRef.current.load()
    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)
      })
    }
}, [])

const handleStop = () => {
 if (videoRef.current) {
    reader.current.reset()
    videoRef.current.pause()
    videoRef.current.currentTime = 0
  }
}

return(

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

Warning on the Browser: