How to use useCursor with invisible hitbox

ChessPiece.tsx

import { Color } from "three";
import { ChessPieceModel, GLTFResult } from "./ChessPieceModel";
import { useState } from "react";
import { useCursor } from "@react-three/drei";

interface BaseChessPieceProps {
  piece: keyof GLTFResult["nodes"];
  color: "white" | "black";
  position: [number, number];
}

const colorSet = {
  white: 0xf4edd3,
  black: 0x1e2324,
};

const BOARD_SIZE = 30;

const BOARD_SPACES = 8;

const ADDER = BOARD_SIZE / BOARD_SPACES;

const OFFSET = BOARD_SIZE / 2 - ADDER / 2;

export function ChessPiece({ piece, color, position }: BaseChessPieceProps) {
  //const [position, setPosition] = useState(position);
  //const [isCaptured, setIsCaptured] = useState(false);
  const [hovered, setHovered] = useState<boolean>(false);
  const [selected, setSelected] = useState<boolean>(false);
  useCursor(hovered /*'pointer', 'auto', document.body*/);

  const getColor = () => {
    return selected ? 0x33ee33 : hovered ? 0x353e40 : colorSet[color];
  };

  return (
    <>
      <ChessPieceModel
        piece={piece}
        color={new Color().setHex(getColor())}
        position={[OFFSET - ADDER * position[0], 0, OFFSET - ADDER * position[1]]}
        //isCaptured={isCaptured}
        //onMove={(newPosition: [number, number]) => setPosition(newPosition)}
        //onCapture={() => setIsCaptured(true)}
      />
      <mesh
        position={[OFFSET - ADDER * position[0], 2, OFFSET - ADDER * position[1]]}
        onClick={(e) => {
          e.stopPropagation();
          setSelected(true);
        }}
        onPointerOver={(e) => {
          e.stopPropagation();
          setHovered(true);
        }}
        onPointerOut={(e) => {
          e.stopPropagation();
          setHovered(false);
        }}
        visible={false}
      >
        <cylinderGeometry args={[ADDER / 3.5, ADDER / 3.5, 4, 16]} />
        <meshBasicMaterial color="red" wireframe={true} />
      </mesh>
    </>
  );
}