Creating a dynamic number of controlled inputs

I have a page where a dynamic, previously unknown, number of records comes from different database entities in the form of objects { id, name }, where the name field is unique. They are output, and each of them corresponds to input, react-hook-form is used to collect data from the form

I need to get access to the data from each input (make them controllable)

const { register, handleSubmit } = useForm();

<form onSubmit={handleSubmit(submit)}>
  {firstItemArray.map((item) => {
    <div>
      {item.name}
      <input {...register(`${item.name}`)} />
    </div>;
  })}
  {secondItemArray.map((item) => {
    <div>
      {item.name}
      <input {...register(`${item.name}`)} />
    </div>;
  })}
  <button type="submit" />
</form>

I have already tried useFieldArray, but it allows you to create only one array, like:

{
  "array": [
    {
      "id": "1",
      "inputValue": "10"
    },
    {
      "id": "2",
      "inputValue": "12"
    }
  ]
}

And I need several arrays:

{
  "firstArray": [
    {
      "id": "1",
      "inputValue": "12"
    },
    {
      "id": "2",
      "inputValue": "34"
    }
  ],
  "secondArray": [
    {
      "id": "1",
      "inputValue": "42"
    },
    {
      "id": "2",
      "inputValue": "24"
    }
  ]
}