Hi everyone & thanks in advance for your help!

I am working on a custom draggable pop-up functional component, but the dragging isn't working as intended and the div does not follow under the mouse.

I had some extra logic in there to handle the x & y offset of the mouse inside the div, but I removed that to first debug why the dragging isn't working properly.

import React, {useState} from 'react';
import './DraggablePopup.css';

const DraggablePopup = () => {
    const [isDragging, setIsDragging] = useState(false);
    const [styles, setStyles] = useState({});

    const handleDragStart = (e) => {                
        console.log('Drag Start');
        setIsDragging(true);        
    }

    const handleDragging = (e) => {        
        if( isDragging ) {
            let left = e.screenX;
            let top = e.screenY;
            setStyles({
                left: left,
                top: top
            });
        }
    }

    const handleDragEnd = () => {
        console.log('Drag End');
        setIsDragging(false);
    }

    return (
        <div
            className={'draggable-popup'}    // position: absolute
            style={styles}
            onMouseDown={handleDragStart}
            onMouseMove={handleDragging}
            onMouseUp={handleDragEnd}
        >
            <div className={'draggable-popup-header'}>
                Header
            </div>
            <div className={'draggable-popup-body'}>
                This is the draggable popup body
            </div>
        </div>
    );
}

export default DraggablePopup;