Help with code - Show Camera - Read code - Close camera and save value

[mDeSimone-DFactorySrl]

Hi all,
i am trying to make a simple app that, when you press a button will show the camera, read a Code and then show the result.
My code is:

import { useState } from 'react';
import { useZxing } from "react-zxing";

const NewRecords = () => {
    const [result, setResult] = useState("");
    const [isSectionVisible, setIsSectionVisible] = useState(false); // Initialize visibility state
  const { ref } = useZxing({
    onDecodeResult(result) {
        console.log(result.getText());
      setResult(result.getText());
    },
  });

  return (
    <>
    <button onClick={() => setIsSectionVisible(!isSectionVisible)}>
        {isSectionVisible ? "Hide" : "Show"} camera
      </button>
      {isSectionVisible && (
        <>
          <video ref={ref} />
          <p>
            <span>Last result:</span>
            <span>{result}</span>
          </p>
        </>
      )}
    </>
  );
};

export default NewRecords;

With this when i press the "Show button" the camera wont work and is it not asking for permission.
If i start my code with "isSectionVisible" at true the camera is working but when i close it and reopen it will stop working.
In this second case if a code is readed this onDecodeResult(result) { console.log(result.getText()); setResult(result.getText()); }, console.log will spam continusly the result.

Can someone help me with my code?
Sorry for bad eng