如何在 ReactJs 的拖拽过程中改变鼠标光标

import React, { useState } from 'react';

function DraggableElement() {
  const [isDragging, setIsDragging] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleDragStart = (e) => {
    setIsDragging(true);
    e.dataTransfer.setData("text/plain", e.target.id); // 必须设置数据，否则dragStart事件不会触发
    e.target.style.cursor = 'grabbing'; // 改变光标样式
  };

  const handleDragEnd = (e) => {
    setIsDragging(false);
    e.target.style.cursor = 'grab'; // 恢复光标样式
  };

  const handleDragOver = (e) => {
    e.preventDefault(); // 必须阻止默认行为，才能触发drop事件
  };

  const handleDrop = (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData("text/plain");
    const element = document.getElementById(id);

    // 获取拖拽元素的新位置
    const x = e.clientX - element.offsetWidth / 2;
    const y = e.clientY - element.offsetHeight / 2;

    setPosition({ x: x, y: y });
  };

  return (
    <div
      id="draggable-element"
      draggable="true"
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      onDragOver={handleDragOver}
      onDrop={handleDrop}
      style={{
        width: '100px',
        height: '100px',
        backgroundColor: 'lightblue',
        cursor: 'grab',
        position: 'absolute',
        left: position.x,
        top: position.y,
      }}
    >
      Drag Me
    </div>
  );
}

export default DraggableElement;