I have a list that can expand out to have children. So something like...

- item 1
+ item 2
   -subItem 1
   +subItem 2
      -childItem
- item3

I have a DraggableRow coponent which define useDrop and useDrag. I the component finishes like so

 drag(drop(ref));

  // Add the reference to the element
  return (
    <div
      ref={ref}
      style={{
        opacity: isDragging ? 0 : 1,
        border: isDragging ? "1px solid hotpink" : "none"
      }}
    >
      {children}
    </div>
  );

which children may be just the cells of the row, or the cells of the first row and the subrows.

My problem is that the Hover method of useDrop is getting confused, constantly entering for the 'parent' row and then the child row when I hover over the child. I would like to only enter the hover method for the child row.

I've modified this so that I add an isOpen to the DraggableRow to distinguish a child row from a parent row and then only accept childRows in useDrop. this mostly works, however, if I'm hoving over an open row, but not any of it's children (so say I'm hoving over "item 2" in my example) I can't drop it, but would like to be able to drop on item 2 so long as I wasn't hovering over a child.

Is there a clean way to ensure only the lowest level row activates the useDrag?