Selecting 3d object seems not working on a React App

[jpngeekudin]

Description
The events like ObjectMouseOver and SelectedChange are not firing when used in React App.

Code

  useEffect(() => {
    tbRef.current = window.tb = new Threebox(
      map,
      map.getCanvas().getContext("webgl"),
      {
        defaultLights: true,
        enableSelectingFeatures: true,
        enableSelectingObjects: true,
        enableDraggingObjects: true,
        enableRotatingObjects: true,
        enableTooltips: true,
      },
    );

    const sphere = tbRef.current
      .sphere({ color: "red", material: "MeshToonMaterial" })
      .setCoords([-122.434, 37.7353, 1]);
    sphere.addEventListener(
      "ObjectMouseOver",
      function (e: any) {
        console.log("ObjectMouseOver: " + e.detail.name);
      },
      false,
    );
    sphere.addEventListener(
      "ObjectMouseOut",
      function (e: any) {
        console.log("ObjectMouseOut: " + e.detail.name);
      },
      false,
    );
    tbRef.current.add(sphere);
  }, []);