如何在react three js中过滤点击？

const [selectedObject, setSelectedObject] = useState(null);

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

const handleMouseClick = (event) => {
  // 计算鼠标点击位置的归一化设备坐标
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 更新射线的起点和方向
  raycaster.setFromCamera(mouse, camera);

  // 检测射线与场景中的对象相交
  const intersects = raycaster.intersectObjects(scene.children, true);

  if (intersects.length > 0) {
    // 获取第一个相交的对象
    const selected = intersects[0].object;

    // 存储被点击的对象到状态变量中
    setSelectedObject(selected);
  }
};

// 在渲染循环中更新场景
const animate = () => {
  // 渲染场景

  // 绑定点击事件监听器
  window.addEventListener('click', handleMouseClick);

  // 更新场景
  requestAnimationFrame(animate);
};

// 在组件挂载时开始渲染循环
useEffect(() => {
  animate();
}, []);

return (
  <div>
    <canvas ref={canvasRef} />
    {selectedObject && <p>选中的对象：{selectedObject.name}</p>}
  </div>
);