Browser API, 'draggable' is not selecting proper target in Next.js

Question

First, please check my code.

    const [dragItem, setDragItem] = useState(undefined);
    const [dragFile, setDragFile] = useState(undefined);
    const [targetFolder, setTargetFolder] = useState(undefined);

    const handleDragStart = (index) => {
        setDragItem(index);
        setTargetFolder(undefined);
    };

    const handleFileDragStart = (index) => {
        setDragFile(index);
        setTargetFolder(undefined);
    }

    const handleDrop = (index) => {
        setTargetFolder(index);
        setIsReady(true);
    };

///////////////////////

<div>
    {rootFolder?.map((root) => (
        <div className={classes.root} key={root.FOLDER_PK}>
            <ListItem
                button
                dense
                divider
                selected

                draggable
                onDragStart={() => handleDragStart(root.FOLDER_PK)}
                onDrop={() => handleDrop(root.FOLDER_PK)}
                onDragOver={(e) => e.preventDefault()}
                
            >
                <ListItemIcon>
                    <Folder />
                </ListItemIcon>

                <ListItemText/>
                <ThreeDotsMenu/>
            </ListItem>
        </div>
    ))}
</div>

This code is being rendered like this.

However, when I quickly click and drag the item, there's no problem. However, when I click the item for about 1~2 seconds and drag, It is being dragged like this.

This is a moment when I click 'folder 4' for about 1 second and drag it.

With this comparison, you can see how It's different when I'm click and drag quickly or not.

I'm new to this Browser API, so I need some help. If you want some more information, please add a comment. I'll add my code right away.

Your help will be much appreciated. Thank you!