Angular dragover css on item in recursive calling list item component

I have an angular component in which it renders the navigation list items recursively.
I want to implement drag and drop on every list item. And on drag over it should highlight particular item on which item is hovered.

Here is the code

<a [ngStyle]="{ 'padding-left': depth * 12 + 'px' }" [ngClass]="{
        'app-drag-over': dragOverItem?.id === item?.id
    }" class="nav-list-item" (drop)="onDrop($event, item)" (dragover)="onDragOver($event, item)"
    (dragleave)="onDragLeave($event, item)">
    <div *ngIf="!collapsed">
        {{ item.displayName }}
    </div>
    <span *ngIf="item.children && item.children.length">
        <i class="material-icons" [@indicatorRotate]="expanded ? 'expanded' : 'collapsed'"> expand_more </i>
    </span>
</a>
<div *ngIf="expanded">
    <nav-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth + 1">
    </nav-list-item>
</div>

and here is ts functions

onDragOver(event: DragEvent, item): void {
    this.dragOverItem = item;
    console.log("onDragOver ~ item:", item);
    event.preventDefault();
}

onDragLeave(event: DragEvent, item): void {
    this.dragOverItem = null;
    console.log("onDragLeave ~ item:", item);
    event.preventDefault();
}

i have added console logs in the drag functions but due to recursive rendering, i am getting too many calls in the events on drag due to which it is slowing down the browser and application and show tha border on item very late.

And if i move the dragged item to another, it is showing flicker and applying very late.

any solution on this?