Anyone used dnd tree with react hook form

[PetterRuud]

A list view with a useFieldArray works fine, as seen here with react-beautiful-dnd.
https://codesandbox.io/s/react-hook-form-usefieldarray-forked-1tzyn?file=/src/index.js

Question is, has anyone tried using React Hook form with DndKit, tree structure, using the example from
https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/examples-tree-sortable--all-features

The problem as I see it is that you need to get the indexes right for the inputs

For example, lets say you want to change the name for each item in the list.

[
  {
    "id": "1a",
    "name": "CHANGEME",
    "children": [
      {
        "id": "1b",
        "name": "CHANGEME",
        "children": []
      }
    ]
  },
  {
    "id": "2a",
    "name": "CHANGEME",
    "children": []
  }
]

The {...register(data.${index}.name} has to be dynamic based on the tree.
So for children it has to know the index path; {...register(data.${index.children.index}.name}

Example of wanted result
https://share.getcloudapp.com/6quN2ePg

So hoping someone has done it and could share some pointers.

[paulwongx]

I'm not sure if I'm addressing your question but conceptually if you have a tree structure as your state, you want to create a function that searches for a node by id (same id as you used in useSortable) and return the name in your register function for react-hook-form. This would require recursive searching of a tree. This is where understanding leetcode tree traversal would help.

[PetterRuud]

Yep, thats what I do now. Trying to figure out the best place to place the function.
Tried having it inside the buildTree function, not optimal.

Works ok with few items when i put in the TreeItem.

CSB
https://codesandbox.io/p/sandbox/dndkit-rhf-d0ge5u