我有一个简单的组件，旁边有一个可拖动的图标（将实现我自己的Resize）。
代码如下所示：

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;

onDragStart事件会正常触发，但onDrag不起作用。我尝试在所有可能的排列中添加e.stopPropagation/preventDefault，但什么也没有。我甚至尝试使用Chrome检查事件断点，但什么也没有。
我正在使用最新的React版本与脉轮UI提供商。
谢谢！