React QR Reader open close camera with React

Question

Good Afternoon guys i have the following problem,I want to click on a button and open the camera or close it and scan the qr code of item. This is my code that i am trying to implement

const qrRef = useRef(null);
const onScanFile = () => {
  qrRef.current.openImageDialog();
};

const handleScanFile = (result) => {
  if (result) {
    setScanResultFile(result);
  }
};

and my return method is below

<BottomBox>
  <QRIcon onClick={onScanFile} width={24} height={24} />
    <Stack ml={2}>SCAN QR CODE</Stack>
</BottomBox>
<QrReader
  ref={qrRef}
  delay={300}
  style={{ width: "100%" }}
  onScan={handleScanFile}
  legacyMode
/>

Every time that i am trigger that component the camera is on,i want to trigger only when i will click the below button:

<QRIcon onClick={onScanFile} width={24} height={24} />