Why is onDrop and onDragOver not getting triggered in React Component when ran in chrome browser? Version of chrome: 97.0.4692.71

Question

I am trying to print inside these event callbacks as you can see in the code, even they are not getting printed. I tried working this out with onDragEnd but the id procured from currentTarget in onDragEnd is the same as onDragStart. So I need onDrop for this which is not getting triggered. Can anyone tell where I am going wrong, here is the code:

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

I am using react hooks and inbuilt HTML drag and drop API. . Edit 1: It is only not working in the latest chrome browser, version: 97.0.4692.71.