react-hook-form weird behavior with dnd-kit and <DragOverlay />

[ciza99]

Hi guys, first of all, really love this library and using it everywhere.

Could you help me understand this behavior and how can I overcome it. Not sure if it would be classified as a bug (probably not), rather its quite unintuative so I am trying to understand what is happening there.
I have created a reproduction of the issue: codesandbox

Steps to reproduce:

• Drag the top list to the bottom (with the X)
• Click on the add button on the top list (was previously on the bottom)

What you will see is that after moving the element using the useFieldArray hook, the form somehow merges the values between the dragged items. This is only happening when using the DragOverlay component which performs a drop animation -> My guess is that during the drop animation, the fields are still active and register on the wrong index or something? Does react-hook-form trigger a change there?

I will appriciate any help, need this for my job where we have quite complex multiple times nested draggable structures within a form with inputs.