如何在useFieldArray中实现嵌套数组的拖拽功能？

我正在使用react-beautiful-dnd和react-hook-form实现嵌套输入数组的拖拽功能：通过useFieldArray钩子管理表单，useController钩子实现受控输入。目前遇到的问题是，尝试重新排序子输入框时，仅最后一项会发生变化。

代码示例 #

代码沙箱地址：https://codesandbox.io/s/watch-usewatch-calc-forked-t5ltk2?file=/src/nestedFieldArray.js

复现步骤 #

• 添加至少2个顶级输入框
• 为每个顶级输入框添加2个嵌套输入框
• 尝试重新排序第一个顶级项的嵌套输入框

异常现象 #

第二个顶级项的子输入框位置改变，而最初拖拽的输入框会恢复原位置：

已尝试的解决方式 #

给嵌套输入框传递ref，使用useImperativeHandle钩子暴露useFieldArray的move方法来重新排序，但每次仅最后一个子项会被重新排序。

内容的提问来源于stack exchange，提问作者miraj