サードパーティのライブラリからイベントがトリガーされたときに状態を変更するようにReactコンポーネントに指示するにはどうすればよいですか？

を使用createjsしてキャンバスを作成していますが、このキャンバスにダブルクリックイベントがあります。イベントがトリガーされたときにReactコンポーネントに通知し、カスタム関数で定義された変数に状態を設定します。たとえば、カスタム関数にある「pose.position」に値を設定したいと思います。

私の反応コンポーネント：

const [value, setValue] = useState(null);
const handleEvent = event => {
   console.log(value);
};
useEffect(() => {
const ros = new ROSLIB.Ros({
   url
});
const viewer = new ROS2D.Viewer({
   divID,
   width,
   height
});
const nav = NAV2D.OccupancyGridClientNav({
   ros,
   rootObject: viewer.scene,
   viewer,
   serverName,
   continuous
});
setValue(nav.position);

const canvas = divEl.current.children[0];

canvas.addEventListener("dblclick", handleEvent, false);

return () => {
    canvas.removeEventListener("dblclick", handleEvnet);
};
}, []);

return <div id={divID} ref={divEl} />;

およびカスタム関数：

this.rootObject.addEventListener("dblclick", function(event) {
  // convert to ROS coordinates
  const coords = stage.globalToRos(event.stageX, event.stageY);
  const pose = new ROSLIB.Pose({
     position: new ROSLIB.Vector3(coords)
  });
  // send the goal
  sendGoal(pose);
  that.position = pose.position;
  // that.mouseClick = true;
  console.log("clicked");
  });
  //I do not know how my React component can get this value, so I just return
  return this.position;

問題は、コンポーネントの値が1回だけ設定され、handleEventのlog関数がnullを出力し、値が更新されないことです。値が変更されたことをReactに通知するにはどうすればよいですか？別のものを作成する必要がありますuseEffect(()=>{}, [value])か？

または

this.rootObject.addEventListener一部のコンポーネントを再レンダリングするようにreactに通知できるように、でアクションをディスパッチできますか？非反応機能でreduxを使用できますか？