реализация react drag and drop, определение местоположения относительно других элементов

Нужен свежий взгляд.

Реализую drag and drop в react (не HTML draggable, через mouseup/mousemove), хочу сделать интерактивную сортировку при перетаскивании активного элемента (по аналогии с beautiful-dnd, react-dnd), но встрял на моменте определения позиции активного элемента(DragItem) относительно drop элемента и неактивных DragItem элементов во время ивента mousemove.

Общая логика следующая:

1. Есть несколько DragItem (элементы, которые можно перемещать)
2. Как только начинается drag, в корне документа создается портал(DragPortal).
3. DragPortal в свою очередь создает ивенты mousemove и mouseup для изменения положения активного DragItem.

Из всех известных вариантов в голову лишь приходит document.elementFromPoint, но данное решение кажется корявым, т.к. приходится отходить от react логики, в частности, скрывать активный элемент для поиска элементов под ним (см пример ниже).

handleMouseMove({ clientX, clientY, target }) {
    target.style.display = "none"; //именно это мне не нравится.
    console.log(document.elementFromPoint(clientX, clientY));
    target.style.display = "block";
}

Хотелось бы не отступать от логики react, возможно, подскажете свежих идей?

весь код можно полистать в codesandbox