React-Flow自定义边锚定Material UI Popper时缩放平移偏移问题

参考React Flow官方的自定义边示例，我实现了一个带Material UI Popper的自定义边——选中边时会弹出Popper。拖拽节点时Popper能正常锚定在边的按钮上，但缩放或平移React Flow画布时，Popper会与锚点脱离。

复现代码如下：

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>
    </>
  );
}

恳请各位帮忙解决该问题。

内容的提问来源于stack exchange，提问作者itaydafna