React Three Fiber: Prevent Overlapping 3D Elements from Triggering Duplicate onClick Events

Context

I'm using React Three Fiber and Drei to create a rotating 3D carousel of images. Each image acts as a card with an onClick event that triggers a function passed via props. I encounter an issue where clicking overlapping images (where one is behind the other) triggers the onClick event on both cards, even though the back one isn't visible.

Here's a simplified snippet from my code:

TYPESCRIPTCopied
function Carousel({ cards, handleClick }: CarouselProps) {
  const count = cards.length;
  const radius = (count * 2.5) / (Math.PI * 2);

  return cards.map((card, i) => (
    <Card
      key={i}
      card={card}
      onClick={() => handleClick(i)}
      position={[
        Math.sin((i / count) * Math.PI * 2) * radius,
        0,
        Math.cos((i / count) * Math.PI * 2) * radius,
      ]}
      rotation={[0, (i / count) * Math.PI * 2, 0]}
    />
  ));
}

A live demo is available here, and the complete code is hosted on GitHub: 3D Carousel code along with the Card component.

Problem

When two images intersect, clicking the front one inadvertently triggers the onClick handler for the image behind it as well. I tried throttling and debouncing, but the second call still occurs after the delay.

Desired Outcome

I need a solution that prevents the click event from “falling through” overlapping 3D elements so that only the top visible card handles the click event. Any advice on a native JavaScript method or a React Three Fiber specific solution would be appreciated.