react-hook-form field array using with nested array structure

Question

i receive an array like this one

const infoArray = [
  {
   categories: [{...}, {...}, {...}],
   id: number,
   categoryTitle: string,
  },
  {
   categories: [{...}, {...}, {...}],
   id: number,
   categoryTitle: string,
  }
]

every element of categories has this structure:

categories = [{
  description: string,
  label: string,
  id: number,
}, 
{
  description: string,
  label: string,
  id: number,
}]

this array represent a series of input, every input with a component that map the categories array, just to have an example

export default function CaseCard({
  categories, categoryTitle, ref, name,
}: CaseFormProps) {
  return (
        {categories.map((category) => (
          <CategoryContainer>
            <CategoryInput ref={ref} value={category.id} />
            <CategoryDescriptionContainer>
              <CategoriesLabel>
                {category.label}
                {' '}
                -
                {' '}
              </CategoriesLabel>
              <CategoriesDescription>
                {category.description}
              </CategoriesDescription>
            </CategoryDescriptionContainer>
          </CategoryContainer>
        ))}
  );
}

this component is rendered through a map of the first data array

<form
  onSubmit={handleSubmit(onSubmit)}
    style={{ display: "flex", flexWrap: "wrap" }}
>
    {infoArray.map(({ id, label, categories }: infoArrayItems) => (
        <CaseCard
            name="test"
            key={id}
            label={label}
            categories={categories}
            ref={register}
        />
    ))}
</form>

Down below is how a CaseCard is displayed, we have one CaseCard for every object inside the array InfoArray

I didn't find an example with complex data structure so i don't understand how to use react-hook-form for this case.

i already saw extensively this example ---> https://codesandbox.io/s/vy8fv , plus multiple answer on SO.

I tried to apply the useFieldArray in multiple ways, but i cannot figure out how it should work without break everything. Can someone please help me to understand on how introduce react-hook-form ?

Answer 1

i found the main problem:

it was the use of ref on the wrong component,

i just changed

        <CaseCard
            name="test"
            key={id}
            label={label}
            categories={categories}
            **ref**={register}
        />

into

    <CaseCard
        name="test"
        key={id}
        label={label}
        categories={categories}
        **register**={register}
    />

and make the props compatible with the relative element.