React onDragEnd does not get the right value

Question

I'd like to drag and drop divs between them. So I have this function for this:

function Block({id,setFormJson, blockType, blockValue,formJsonArray,setIsNewForm}) {
    const dragItem = useRef();
    const dragOverItem = useRef();

    const dragStart = (e, position) => {
        dragItem.current = position;
        console.log("item - " + dragItem.current)
    };

    const dragEnter = (e, position) => {
        dragOverItem.current = position;
        console.log("over - " + dragOverItem.current)
    };

    const drop = (e) => {
        console.log("item - " + dragItem.current + " over - " + dragOverItem.current)
        dragItem.current = null;
        dragOverItem.current = null;
    };


    return (
        <div className="d-flex align-items-center block-container" id={id} onMouseOver={() => setButtonsClassesName("div-buttons")} onMouseOut={() => setButtonsClassesName("div-buttons invisible")} onDragStart={(e) => dragStart(e, id)} onDragEnter={(e) => dragEnter(e, id)} onDragEnd={drop} draggable>
            <Component setTextEditorLeftPosition={setTextEditorLeftPosition} setOpenTextEditor={setOpenTextEditor} id={id} formJsonArray={formJsonArray} setFormJson={setFormJson} blockValue={blockValue} blockType={blockType} setOpenContextualMenu={setOpenContextualMenu} />
        </div>
    )
}

On DragStart, dragItem.current return ac3234b0-1c02-49c7-a8d6-bc3975de0200 id and on dragEnter return 242392d9-a30d-4ba0-9934-88dcadf0aace id. But onDragEnd dragItem.current and dragOverItem.current return the same id: ac3234b0-1c02-49c7-a8d6-bc3975de0200

Why?

The component "Block" is called with map function. I'm using the last version of React.

Answer 1

To fix, I just declared constants dragItem and dragOverItem on root function and pass it on Block function.