onClick event.detail is not resetting after React component replaced

The onClick event.detail contains the number of clicks: double-click has event.detail = 2.

When the clicked React component is replaced, the event.detail does not reset. I suspect this is because React has optimized this & kept the same div in the page, so the browser has not reset the event.detail counter.

How can I force this event.detail counter to reset when the component is changed? I want to be able to double-click items in the list multiple times while navigating.

Issue reproduction: https://codesandbox.io/p/sandbox/react-on-click-event-detail-6ndl5v?file=%2Fsrc%2FApp.tsx%3A44%2C12

App.tsx:

const ListItem: React.FC<{
  content: string;
  onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
}> = ({ content, onClick }) => {
  return (
    <div
      onClick={onClick}
      style={{ background: "rgba(0,0,0,0.5)", userSelect: "none" }}
    >
      {content}
    </div>
  );
};

const ListRenderer: React.FC = () => {
  // n tracks the number of double clicks
  const [n, setN] = useState(0);

  // items simulates an updating list of items when double-clicking
  const items = useMemo(
    () => Array.from({ length: 10 }, (_, i) => `${n}: item ${i}`),
    [n]
  );

  const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
    console.log(`Click: event.detail: ${event.detail}`);
    if (event.detail === 2) {
      // Double-clicked an item.
      setN((prev) => prev + 1);
    }
  }, []);

  return (
    <>
      <div>
        {items.map((item, index) => (
          <ListItem
            key={`items-${n}-${index}`}
            content={item}
            onClick={handleClick}
          />
        ))}
      </div>
    </>
  );
};