dragStart delay with many sortable Items

[myamaak]

Hello,
I am using dnd-kit to sort nested items. I can sort, add, edit, and delete parent items and child items like below.

Performance is fine when I don't have many items to sort. But as the number of items increases, dragStart event is causing rerender for too many components.
I'm currently using component just as the guide says. However, in my situation, 'setActiveId' is taking too much time until setting an active Id, due to rerenders.
So it seems like there's a delay when a user starts dragging... but the actual problem is a delay until Dragoverlay component becomes visible.

My solution was to hide child items of parent item which is not in the viewport, using intersectionObserver. (I couldn't hide the parent Item itself, as it would affect the location of other items).
But I am not happy with it because items can be dynamically added and I don't want to limit the number of items. If too many items are added, the problem above can always occur again.

I have been searching for a similar issue on dnd-kit users but have failed to find one. I wonder if anyone has met a similar situation using dnd-kit, and has solved the issue.

[myamaak]

I figured out that, the edit and delete buttons that were in my child items were the problem. They were also rerendering as the child items rerender. Hence causing the delay every time dnd event starts. Giving the buttons as props to the Child Item component solved the issue.