R3F raycast hits wrong object

[MiguelG97]

• three version:
• @react-three/fiber version:^8.16.2
• @react-three/drei version:^9.105.4
• node version:20.10.0
• npm (or yarn) version:10.2.3

Problem description:

The issue is that when hovering the mouse over the same buffer geometry mesh, it returns different Ids!!

Relevant code:

this is the code to generate buffergeometries:

const boxList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const depth = 0.1;
const width = 0.017;

<Splat
position={[0, 0, 0]}
src={URL}
/>

{boxList.map((i) => {
const v1 = [-0.075 + i * width, 0.06, 0];
const v2 = [-0.075, 0.06, -depth];
const v3 = [
-0.075 + (i + 1) * width,
0.06,
-depth,
];
const v4 = [
-0.075 + (i + 1) * width,
0.06,
0,
];

const v5 = [v1[0], 0.15, v1[2]];
const v6 = [v2[0], 0.15, v2[2]];
const v7 = [v3[0], 0.15, v3[2]];
const v8 = [v4[0], 0.15, v4[2]];

const vertices = new Float32Array([
  //bottom
  ...v1,
  ...v2,
  ...v3,

  ...v3,
  ...v4,
  ...v1,

  //top
  ...v5,
  ...v6,
  ...v7,

  ...v7,
  ...v8,
  ...v5,

  //north
  ...v1,
  ...v4,
  ...v5,

  ...v4,
  ...v5,
  ...v8,

  //east
  ...v1,
  ...v2,
  ...v5,

  ...v5,
  ...v6,
  ...v2,

  //south
  ...v2,
  ...v3,
  ...v6,

  ...v6,
  ...v7,
  ...v3,

  //west
  ...v3,
  ...v4,
  ...v7,

  ...v7,
  ...v8,
  ...v4,
]);

return (
  <mesh
    key={i}
    onPointerMove={(e) => {
      console.log(e.object.id);
    }}
  >
    <bufferGeometry>
      <bufferAttribute
        attach="attributes-position"
        array={vertices}
        count={vertices.length / 3}
        itemSize={3}
      />
    </bufferGeometry>
    <meshBasicMaterial
      transparent={true}
      opacity={0.1}
      color={0xff0000}
      side={2}
    />
  </mesh>
);

})}

Suggested solution:

How can I intersect the buffer geometries using the raycast in R3F? Regards