React onDrag not working but onDragStart works

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!