HTML drag and drop, preview looks like multiple items are dragged

When trying to drag and drop items in the list, the selected element seems to "bleed" downward with the same height - so it looks like two elements are being dragged, and if the bottom most element it looks like the element plus some of the content after is being dragged.

Not sure how to debug as I have the same setup in another part of my app with the same css and it works as expected.

Here's the drag and drop component:

<script lang="ts">
    export let index: number;
    export let list: any[];
    export let updateOrder: (list: any[]) => void;
    export let hovering = null;

    const dragstart = (event: DragEvent, index: number) => {
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.dropEffect = 'move';
        event.dataTransfer.setData('text/plain', `${index}`);
    };
    const drop = (event: DragEvent, target: number) => {
        event.dataTransfer.dropEffect = 'move';
        const start = parseInt(event.dataTransfer.getData('text/plain'));
        const newTracklist = list;
        if (start < target) {
            newTracklist.splice(target + 1, 0, newTracklist[start]);
            newTracklist.splice(start, 1);
        } else {
            newTracklist.splice(target, 0, newTracklist[start]);
            newTracklist.splice(start + 1, 1);
        }
        list = newTracklist;
        updateOrder(newTracklist);
        hovering = null;
    };
</script>

<div
    draggable="true"
    on:dragstart={(event) => dragstart(event, index)}
    on:drop|preventDefault={(event) => drop(event, index)}
    on:dragover={(ev) => {
        ev.preventDefault();
    }}
    on:dragenter={() => (hovering = index)}
>
    <slot />
</div>