Check box not activating on Chrome [Version 101.0.4951.41 (Official Build) (64-bit)]

Edit: It seems as if my checkboxes are not working at all. When a regular checkbox was added to my HTML, it also did not respond to click events.

I am currently working on a dat.gui menu for my THREE.JS project.

Here is my project: https://codesandbox.io/s/ray-test-km2wru?file=/src/World.js:5581-5741

You will see that clicking the checkbox should change the equation for the plane as seen on lines 144. I am noticing that checkbox, when clicked, doesn't uncheck on chrome. However, when tested in firefox, the checkbox will unclick and switch the value of planeSpecs.waveXY to false.

  _createPlane() {
    // Dat.GUI controllers
    let planeSpecs = {
      scaler: 1,
      speed: 1,
      waveXY: true
    };
    let planeMat = new THREE.MeshStandardMaterial({
      color: 0x6d6e6d,
      side: THREE.DoubleSide,
      wireframe: true
    });

    // Creates a single plane with wireframe
    let planeGeo = new THREE.PlaneGeometry(25, 25, 200, 200);
    var plane = new THREE.Mesh(planeGeo, planeMat);
    const planeFolder = this._GUI.addFolder("Plane");
    // These scales work
    planeFolder.add(planeSpecs, "scaler", 1, 10);
    planeFolder.add(planeSpecs, "speed", 0.1, 25);


    // This checkbox code doesn't work:
    const waveXYController = this._GUI
      .add(planeSpecs, "waveXY")
      .listen()
      .onChange((newValue) => {
        console.log(newValue);
      });
    planeFolder.open();


    plane.position.y -= 3;
    plane.rotation.set(Math.PI / 2, 0, 0);

    // Animation for the plane
    plane.tick = (delta, elapsedTime) => {
      const { position } = planeGeo.attributes;
      for (let i = 0; i < position.count; i++) {
        let x = position.getX(i);
        let y = position.getY(i);
        let z = position.getZ(i);

        // Change the equation based on checkbox boolean
        z = planeSpecs.waveXY
          ? Math.sin(
              Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) +
                elapsedTime * planeSpecs.speed
            ) * planeSpecs.scaler
          : Math.sin(x + elapsedTime * planeSpecs.speed) * planeSpecs.scaler;
        position.setXYZ(i, x, y, z);
      }
      position.needsUpdate = true;
    };
    return plane;
  }

From what I have researched, they way I added the dat.gui seems to be correct: https://www.nowherenearithaca.com/2015/07/datgui-easy-way-to-allow-users-to.html

I did make a forum post on the Three.JS forums, but after figuring out this is a browser issue I made a post here instead: https://discourse.threejs.org/t/dat-gui-checkbox-not-working-on-chrome/37642/2

The issue was the THREE.JS library plugin Orbit Controls was adding event listeners to the body element, resulting in the dat.gui not being able to receive mouse inputs.

To avoid this, the second parameter for OrbitControls should be a dom element.
eg. new OrbitControls(camera, renderer.domElement);
Though, in the latest versions of three.js this second paramater is enforced.