Tengo una lista que se puede ampliar para tener hijos. Entonces algo como...

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

Tengo un componente DraggableRow que define useDrop y useDrag. I el componente termina así

 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> );

cuyos hijos pueden ser solo las celdas de la fila, o las celdas de la primera fila y las subfilas.

Mi problema es que el método Hover de useDrop se está confundiendo, ingresando constantemente para la fila 'principal' y luego la fila secundaria cuando paso el mouse sobre el elemento secundario. Me gustaría ingresar solo el método de desplazamiento para la fila secundaria.

Modifiqué esto para agregar un isOpen a DraggableRow para distinguir una fila secundaria de una fila principal y luego solo aceptar childRows en useDrop. esto funciona principalmente, sin embargo, si estoy sobre una fila abierta, pero no sobre ninguno de sus hijos (digamos que estoy sobre el "elemento 2" en mi ejemplo) no puedo soltarlo, pero me gustaría ser capaz de dejar caer el elemento 2 siempre que no estuviera flotando sobre un niño.

¿Hay una manera limpia de garantizar que solo la fila de nivel más bajo active useDrag?