I use Antd nested form feature which takes advantage of <Form.List> to get nested form items. I am trying to connect it with sortable dnd-kit but have a problem within the second <Form.List />.

Generally my structure is:

export const mockData: FormI = {
  groups: [
    {
      dndId: "group-1",
      items: [
        { desc: "A", dndId: "1A" },
        { desc: "B", dndId: "1B" },
        { desc: "C", dndId: "1C" },
      ],
    },
    {
      dndId: "group-2",
      items: [
        { desc: "X", dndId: "2X" },
        { desc: "Z", dndId: "2Z" },
      ],
    },
  ],
};


<DndContext>
  <Form>
    <Form.List name="groups">
      {(groups) => (
       <SortableContext>
         {groups.map((group) => (
           <SortableGroup>
             <SortableContext>
               <Form.List name={[group.name, "items"]}>
                 {(groupItems) => groupItems.map((item) => (
                   <SortableGroupItem />
                 )}
               </Form.List>
             </SortableContext>
           </SortableGroup>
         )}
       </SortableContext>
      )}
    </Form.List>
  </Form>
</DndContext>

In the above scenario I cannot move an item from one group to another. Sorting withing a group works fine.

However, if I omit the nested <Form.Item> the dragging works fine:

{items[groupDndId].map((itemId) => (
   <SortableGroupItem key={itemId} dndId={itemId} />
))}

Here’s a working example: CodeSandbox. Lines 277-305 in App.tsx. The uncommented part is the failing one, the commented part is working.