How to activate/deactivate PointerLockControls?

I am using PointerLockControls and I would like to be able to disable the mouse lock when I am in the menu. I want the only way to lock the mouse is to press the button for that.
Similar to what is done here:

I tried to make the following code, where “ready” is true only when we press a button. Which seems to work. However, it can lock even when ready is false. I tough .connect()/.disconnect() would allow to deactivate the lock.
I also tried to have a div in front of the whole canvas in order to avoid clicking the canvas, which theoretically should work as well. But I can’t find a way to avoid the click to go through the div.

function PointerLocks({ ready, setReady }) {
  const controls = useRef()

  useEffect(() => {
    if (ready) {
  }, [ready])

  const onUnlockHandle = useCallback(() => {

  return <PointerLockControls ref={controls} maxPolarAngle={Math.PI - 0.0001} minPolarAngle={0.0001} onUnlock={onUnlockHandle} />

I’m having the same problem. I’'ve added some links on a navbar at the top of the page, but I can’t click it since it’ll always lock the mouse and make the menu disappear.
I can only click the links a few seconds after unlocking the mouse, since you can’t lock again for a short moment.