Координаты мыши js dnd

Необходиом получить координаты мыши (делаю dnd). На событие onmouseenter вызываю функцию, которая получает координаты :

x = e.pageX;
y = e.pageY;

Но объект улетает куда-то в космос. При получении координат просто по onClick по полю объект отрисовывается в нужном месте.

x = e.nativeEvent.offsetX;
y = e.nativeEvent.offsetY;

Как правильно получать координаты объекта при перетаскивании?

Полный код ниже:

let blockDraggable = undefined;
let x =0;
let y = 0;

function onClick(e) {
    x = e.nativeEvent.offsetX;
    y = e.nativeEvent.offsetY;
}


function moveBlock(e) {
    x = e.pageX;
    y = e.pageY;
}

function EditPanel() {


    const [{isOver}, drop] = useDrop({
        accept: ItemTypes.BLOCK,
        drop: () => {
            document.onmouseenter = function (e) {
                moveBlock(e)

                document.onmouseenter = null;
            }
        },
        collect: monitor => ({
            isOver: !!monitor.isOver(),
        }),
    });

        blockDraggable = <BlockDragable x={x}
                                        y={y}/>;
        
    return (

        <Col>
            <div ref={drop}
                 className={"editor"}
            >
                <div
                    className={"edit_panel"}
                    onClick={onClick}

                >
                    {console.log("drag " + x + ' ' + y)}
                    {blockDraggable}

                    {isOver && (
                        <div className="draggable_component"/>
                    )}
                </div>
            </div>
        </Col>
    )
}


export default EditPanel;