受this example in the react-flow docs的启发，我创建了my own version，它可以在选中边后打开Material Ui Popper。我的问题是，当我四处拖动节点时，弹出器完美地固定在边的按钮上，当我试图缩放或平移React流表面时，弹出器与锚分离。
下面是一个sandbox重现了这个问题，下面是相关的代码：

import React, { useState, useRef, useEffect } from "react";
import { getBezierPath } from "reactflow";
import { Fade, Paper, Popper } from "@mui/material";

import "./index.css";

const foreignObjectSize = 40;

export default function CustomEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  markerEnd,
  selected
}) {
  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition
  });

  const [isPopperOpen, setIsPopperOpen] = useState(false);
  const anchorElementRef = useRef();

  useEffect(() => {
    if (selected) {
      setTimeout(() => setIsPopperOpen(true), 350);
    }
  }, [selected]);

  return (
    <>
      <path
        id={id}
        style={style}
        className="react-flow__edge-path"
        d={edgePath}
        markerEnd={markerEnd}
      />
      <foreignObject
        width={foreignObjectSize}
        height={foreignObjectSize}
        x={labelX - foreignObjectSize / 2}
        y={labelY - foreignObjectSize / 2}
        className="edgebutton-foreignobject"
        requiredExtensions="http://www.w3.org/1999/xhtml"
      >
        <div ref={anchorElementRef}>
          <button className="edgebutton">×</button>
          <Popper
            open={isPopperOpen}
            anchorEl={anchorElementRef.current}
            placement="top"
            transition
          >
            {({ TransitionProps }) => (
              <Fade {...TransitionProps} timeout={350}>
                <Paper style={{ padding: 15 }}>Helo popper!</Paper>
              </Fade>
            )}
          </Popper>
        </div>
      </foreignObject>
    </>
  );
}

任何帮助都将不胜感激。