React onDrag not working but onDragStart works - reactjs

Question

I have a simple component with a draggable icon next to it (going to implement my own Resize).
The code is as follows:
type ICanvas = {
currPageId:string
}
const Canvas:FC<ICanvas> = ({currPageId}) => {
const story = useStoryStore(state=>state.story);
const handleDragStart = (e:any) => {
console.log("start")
};
const handleOnDrag = (e:any) => {
console.log("on drag");
};
return (
<Box {...Styles.CanvasContainer} pos='relative'>
<div
className="resize-button"
draggable
onDrag={handleOnDrag}
onDragStart={handleDragStart}
onDragEnd={handleOnDrag}
>
<HorizonIcon type='arrow_chevron_down'/>
</div>
</Box>
)
}
export default Canvas;
The onDragStart event fires as it should, but onDrag doesn't work. I tried adding e.stopPropagation/preventDefault everywhere in all possible permutation but nothing.
I even tried using the Chrome inspect event breakpoints and nothing.
I am using latest react version with Chakra UI provider.
Thanks!

Answer 1

So after some digging and a little bit of luck I found out that I had in my system a dependancy of React-dnd-HTML5backend.
With a little google research I found out that this library causes problem with native dragging events within every application it is installed in.
So the solution would be using react-dnd that I already have installed in my project.