document.elementFromPoint defines the element before or after which the dragged element should be inserted. When I use this method, it returns the item being dragged, not the one to be defined. Why doesn't it happen and how do I fix the error?

 evt.preventDefault();
 if (!draggedEl) {
   return;
 }
 draggedEl.style.left = `${evt.pageX - draggedEl.offsetWidth / 2}px`;
 draggedEl.style.top = `${evt.pageY - draggedEl.offsetHeight / 2}px`;
 **const closest = document.elementFromPoint(evt.clientX, evt.clientY);**
 const { top } = closest.getBoundingClientRect();
 if (evt.pageY > window.scrollY + top + closest.offsetHeight / 2) {
   // closest.style.paddingBottom = `${draggedElWidth}px`;
 } else {
   // closest.style.paddingTop = `${draggedElWidth}px`;
 }
});

Full code: https://github.com/tati-simonenko/ahj6/blob/master/src/js/taskWidget.js