为什么在 Chrome 浏览器中运行时，React 组件中的 onDrop 和 onDragOver 没有被触发？铬版本：97.0.4692.71

Question

我正在尝试在这些事件回调中打印，正如您在代码中看到的那样，即使它们没有被打印。我尝试使用 onDragEnd 解决这个问题，但 onDragEnd 中从 currentTarget 获取的 id 与 onDragStart 相同。所以我需要 onDrop 来实现这一点，但它不会被触发。谁能告诉我哪里出了问题，这里是代码：

import React, { useState } from 'react'
import { MoreVert } from '@material-ui/icons';

function newFunc(){

const [dragId, setDragId] = useState('')
const [pendingTask, setPendingTask] = useState([{order: 1, id: 'task1'}, {order: 2, id: 'task2'}, {order: 3, id: 'task3'}])

const handleDrag = (evt) => {
    console.log(evt.currentTarget.id)
    setDragId(evt.currentTarget.id)
}

const handleDragOver = (event) => {
    console.log(event.currentTarget)
    event.preventDefault()
}

const handleDrop = (evt) => {
    alert('dropped')
    console.log(evt)
    const dragBox = pendingTask.find((task) => task.id === dragId);
    const dropBox = pendingTask.find((task) => task.id === evt.currentTarget.id);

    const dragBoxOrder = dragBox.order;
    const dropBoxOrder = dropBox.order;

    const newPendingTaskState = pendingTask.map((task) => {
        if (task.id === dragId) {
            task.order = dropBoxOrder;
        }
        if (task.id === evt.currentTarget.id) {
            task.order = dragBoxOrder;
        }
        return task;
    });

    setPendingTask(newPendingTaskState);
}
const handlePendingTaskClick = () => {
// doing something
}

return(
    <div>
{pendingTask.length ? 
        pendingTask.map((elem, ind)=>{
        return(
            <div
                style={{cursor: 'pointer'}}
                key={ind}
                onClick={() => handlePendingTaskClick(elem)}
            >
            <div
                draggable={true}
                onDragOver={handleDragOver}
                onDragStart={handleDrag}
                onDrop={handleDrop}
                id={elem.id}  
            >
                <MoreVert />
            </div>
            <div>
                {elem.workflow}
            </div>
            </div>
        )                              
        }):null
    }
</div>
)
}

export default newFunc

我正在使用 React hooks 和内置的 HTML 拖放 API。 。 编辑1：它仅在最新的chrome浏览器中不起作用，版本：97.0.4692.71。