const boxRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const onMouseClickDragGraph = (ev: MouseEvent) => {
      // stop propagation if the button clicked/hold drag is different than the main (left click) mouse button
      if (ev.button !== 0) {
        ev.stopImmediatePropagation();
      }
    };

    let box: HTMLDivElement = null;

    if (boxRef && boxRef.current) {
      box = boxRef.current;
      box.addEventListener("mousedown", onMouseClickDragGraph);
      box.addEventListener("mouseup", onMouseClickDragGraph);
    }

    return () => {
      box?.removeEventListener("mousedown", onMouseClickDragGraph);
      box?.removeEventListener("mouseup", onMouseClickDragGraph);
    };
  }, []);