Indicate Dropped over element above or below?

[adnanmirza1]

Hi,
I'm currently implementing a drag-and-drop sorting functionality using dnd-kit, but I'm encountering a few challenges. In a dnd sortable scenario, it's straightforward to determine whether an element is dropped above or below the target element using the following logic:

javascript:
const overIndex = over.data?.current?.sortable?.index;
const activeIndex = active.data?.current?.sortable?.index;
const direction = (activeIndex > overIndex) ? 'Up' : 'Down';

However, due to some nested drag-and-drop logic in my application, the sortable feature is malfunctioning. Consequently, I've decided to handle sorting using the basic drag-and-drop approach. With this approach, I can only obtain the ID of the target element where the dragged element is dropped, which results in always adding the dragged element below the target element.
This works fine generally, but it doesn't allow me to drag an element to the first index since it always adds the dragged element to the next index of the dropped element. Additionally, I'm displaying a "drop here" indicator below the target element to help users understand where they are dropping the element.
Here's the current logic I use to determine the vertical drop position:

javascript:
const verticalDropPosition = (event.delta.y < 0 && (over.rect.bottom >= active.rect.current.translated.bottom)) ? 'high' : 'low';
While this partially works, I believe there must be a more effective way to achieve this, particularly in showing the "drop here" indicator on both the top and bottom of the target element.
Could you provide guidance on how to solve this problem using dnd-kit? Specifically, I am looking for a way to display the "drop here" indicator on both the top and bottom of the target element and to handle the drag-and-drop sorting accurately.
Thank you!