Firefox中拖拽列表组件时下方元素闪烁问题求助

大家好，我最近做了一个带拖拽功能的标签列表组件，拖拽逻辑参考了原生JS的拖拽实现思路。但遇到一个奇怪的问题：当我用比较生硬、不流畅的动作拖拽某个标签时，列表中它下方的所有标签都会出现闪烁的情况。

需要说明的是，这个问题只在最新版Firefox里出现，在Chromium类浏览器里完全正常。

下面是我的React实现代码：

const App = () => {
  useEffect(() => {
    const labels = document.getElementsByClassName("label");
    for (let i = 0; i < labels.length; i++) {
      manageMouse(labels[i]);
    }
  });

  const manageMouse = (label) => {
    // 拖拽逻辑参考原生JS拖拽实现思路
    let pos1 = 0;
    let pos2 = 0;
    let pos3 = 0;
    let pos4 = 0;

    const initEvent = (e) => {
      if (e.button === 0) initDrag(e);
      else return;
    };

    function initDrag(e) {
      // label.style.zIndex = "1000";
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDrag;
      document.onmousemove = performDrag;
    }

    const performDrag = (e) => {
      e.preventDefault();
      pos1 = e.clientX - pos3;
      pos2 = e.clientY - pos4;
      pos3 = e.clientX;
      pos4 = e.clientY;
      label.style.top = label.offsetTop + pos2 + "px";
      label.style.left = label.offsetLeft + pos1 + "px";
    };

    const closeDrag = () => {
      document.onmouseup = null;
      document.onmousemove = null;
      // label.style.zIndex = "auto";
    };

    label.onmousedown = initEvent;
  };

  const Label = ({ name, x, y }) => {
    return (
      <label
        className="label"
        id={name}
        style={{
          left: x,
          top: y
        }}
      >
        {name}
      </label>
    );
  };

  const names = ["1 Acturus", "2 Lyre", "3 Vega", "4 Deneb", "5 Altair"];
  let xInit = 20;
  let yInit = 60;
  let labels = [];

  for (let i in names) {
    labels.push(<Label name={names[i]} x={xInit} y={yInit} />);
    xInit = xInit + 20;
    yInit = yInit + 30;
  }

  return (
    <div>
      <p>
        当用生硬的动作拖拽时，Firefox中下方的标签会出现闪烁
      </p>
      {labels}
    </div>
  );
};

我试过调整z-index属性，但好像没什么效果。有没有大佬遇到过类似的问题，或者能帮我分析下Firefox里为什么会出现这种闪烁情况？

备注：内容来源于stack exchange，提问作者user22133780