Reset function not working with "@zxing/Browser" in React TypeScript

Question

I'm trying to close the reader with reset() function but it's giving an error.

Here is my component:

import { BrowserMultiFormatReader } from "@zxing/browser"

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)
      })

const handleStop = () => {
  reader.current.reset()
}

return(

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

Here is the error. Any idea why is this happening?

Property 'reset' does not exist on type 'BrowserMultiFormatReader'.