I have a drag and drop functionality in my Next app. It works fine in Chrome but bugs in Firefox. I trigger the functionality in the onMouseDown callback of a div, like onMouseDown={(e) => handleDragStart(e, index)} . The handlers look like the following:

const handleDragStart = (event: React.MouseEvent<HTMLDivElement>, index: number) => {
           ...

            document.addEventListener('mousemove', (e) =>
                handleDragMove(e, index)
            );
            document.addEventListener('mouseup', () => handleDragEnd(index));
        }
};

const handleDragMove = async (event: MouseEvent, index: number) => {
        event.preventDefault();
        ...
}

const handleDragEnd = (index: number) => {
        ...
        document.removeEventListener('mousemove', (e) =>
            handleDragMove(e, index));
        document.removeEventListener('mouseup', () => handleDragEnd(index));
};

Any idea ? Do I need a polyfill or something like that ?