用React useEffect添加的Fabric JS对象的鼠标悬停事件没有触发

我试图捕捉画布初始化后一段时间内添加的织物对象的鼠标移动事件。我使用的是 react，所以我在useEffect 钩子里做这个：

  useEffect(() => {
    canvasRef.current = new fabric.Canvas("c", {
      width: 300,
      height: 600,
      backgroundColor: "#666",
      selection: false
    });

    canvasRef.current.add(
      new fabric.Rect({
        width: 100,
        height: 100,
        top: 100,
        left: 100,
        fill: "#660000"
      })
    );
    canvasRef.current.on("mouse:over", function (e) {
      console.log("mouse over", e.e.clientX, e.e.clientY, e.target);
    });


    canvasRef.current.requestRenderAll();

    setTimeout(() => {
      canvasRef.current.add(
        new fabric.Rect({
          width: 100,
          height: 100,
          top: 200,
          left: 100,
          fill: "#666600"
        })
      );
      canvasRef.current.requestRenderAll();
    }, 1000);
  }, []);

由于某些原因，只有在画布被初始化后立即添加的对象对mouse:over 事件作出了反应。

其他两个后来添加的矩形（一个有超时，另一个在基于状态变化的useEffect 钩子中）在悬停时没有记录目标。

我不确定这是不是因为 fabric JS 与 react 的交互方式很奇怪，还是因为其他原因，但如果有人能给我指出正确的方向，我会很感激。