Reactflow, drag and drop to a parent node

Question

I can't drop a node as a child of another node when drop from a external sidebar.

I try two attempts. I was inspired in doc. In onDrop function I put this code trying that one of them works

Collision Detection from doc

const centerX = newNode.position.x + newNode.width / 2;
const centerY = newNode.position.y + newNode.height / 2;

// find a node where the center point is inside
const targetNode = nodes.find(
    (n) =>
        centerX > n.position.x &&
        centerX < n.position.x + n.width! &&
        centerY > n.position.y &&
        centerY < n.position.y + n.height! &&
        n.id !== newNode.id // this is needed, otherwise we would always find the dragged node
);

Intersections from doc

const intersections = getIntersectingNodes(newNode).map((n) => n.id);

nodes.forEach((n) => {
    if ( intersections.includes(n.id) ) {
        console.log("INTERSECTA")
    } else {
        console.log("NO INTERSECTA")
    }
    return ({
        ...n,
        className: intersections.includes(n.id) ? 'highlight' : '',
    })
})

Here is a simple code sandbox

Code sandbox