如何在reactjs拖动事件中隐藏重影图像？

state = {
  dragging: false,
  offsetX: 0,
  offsetY: 0
};

onDragStart = (e) => {
  e.dataTransfer.setData("text/plain", ""); // 必须设置数据类型，否则拖放事件可能无法正常触发
  this.setState({
    dragging: true,
    offsetX: e.clientX - e.target.getBoundingClientRect().left,
    offsetY: e.clientY - e.target.getBoundingClientRect().top
  });
};

onDrag = (e) => {
  e.preventDefault(); // 阻止浏览器默认的拖放行为
  if (this.state.dragging) {
    const x = e.clientX - this.state.offsetX;
    const y = e.clientY - this.state.offsetY;
    e.target.style.transform = `translate(${x}px, ${y}px)`;
    e.target.style.opacity = 0; // 隐藏重影图像
  }
};

onDragEnd = (e) => {
  this.setState({
    dragging: false,
    offsetX: 0,
    offsetY: 0
  });
  e.target.style.transform = "";
  e.target.style.opacity = 1;
};

render() {
  return (
    <div>
      <div
        draggable
        onDragStart={this.onDragStart}
        onDrag={this.onDrag}
        onDragEnd={this.onDragEnd}
      >
        拖动我
      </div>
    </div>
  );
}