title: Get reference to hovered object three.js react
body: <p>I'm using <code>react-three-fiber</code> to load a scene with many smaller objects. I want all the objects in the scene to be hoverable. I also want reference to the hoverd objects so I do things like changing their material etc. Here's my code:</p>
  <pre><code>const Scene = (props) =&gt; {
    const group = useRef();
    const { nodes, materials } = useGLTF(&quot;/scene1.glb&quot;);
    const [hovered, setHover] = useState(false);
  
    return (
      &lt;group ref={group} {...props} dispose={null}&gt;
        &lt;mesh
          castShadow
          receiveShadow
          geometry={nodes.Floor.geometry}
          material={materials.floor_mat}
          position={[-2.27, -2.87, 13.96]}
        /&gt;
        &lt;mesh
          castShadow
          receiveShadow
          geometry={nodes.Walls.geometry}
          material={materials.wall_mat}
          position={[-8.95, 14.68, -25.15]}
        /&gt;
  &lt;/group&gt; );
  }
  </code></pre>
  <p>I know there are events like <code>onPointerEnter</code> and <code>onPointerLeave</code> but how do I get reference to the object which is being hovered so I can do things to that object?</p>