onClick and pointer events in React Three Fiber

import { Canvas } from '@react-three/fiber'
import { useEffect, useState } from 'react'

function Tile({ x, z, up }) {
  const [hovered, setHovered] = useState(false)
  const [raised, setRaised] = useState(up)
  useEffect(() => {
    document.body.style.cursor = hovered ? 'pointer' : 'auto'
  }, [hovered])
  return (
    <mesh
      position={[x, raised ? 0.4 : 0, z]}
      scale={[1, raised ? 3 : 1, 1]}
      onClick={(e) => { e.stopPropagation(); setRaised(!raised) }}
      onPointerOver={(e) => { e.stopPropagation(); setHovered(true) }}
      onPointerOut={() => setHovered(false)}
    >
      <boxGeometry args={[0.9, 0.3, 0.9]} />
      <meshStandardMaterial color={raised ? '#eb6834' : hovered ? '#6da7ec' : '#d9d8d2'} />
    </mesh>
  )
}

const tiles = []
for (let x = -3; x <= 3; x++) {
  // a few tiles start raised; click any tile to toggle it
  for (let z = -3; z <= 3; z++) tiles.push({ x, z, up: x === z || x === -z })
}

export default function App() {
  return (
    <Canvas
      camera={{ position: [5, 6, 7], fov: 40 }}
      onPointerMissed={() => console.log('Clicked empty space')}
    >
      <color attach="background" args={['#1a1a19']} />
      <ambientLight intensity={0.7} />
      <directionalLight position={[4, 8, 3]} intensity={2} />
      {tiles.map((t) => <Tile key={`${t.x},${t.z}`} {...t} />)}
    </Canvas>
  )
}