title: React-hook-form useFieldArray for an array of strings instead of objects
body: <p>I am using useFieldArray to fetch default values from my backend api. My <strong>categories</strong> is an array of strings. However, react-hook-form only supports array of objects. Here is my mongoose's schema</p>
  <pre><code> type BookDocument = Document &amp; {
    title: string
    description: string
    categories: string[]
    language: string
    publicationYear: number
  }
  
  const bookSchema = new Schema(
    {
      title: { type: String, required: true },
      description: { type: String, required: true },
      categories: [{ type: String, requried: true }],
      language: { type: String, required: true },
      publicationYear: { type: Number, required: true },
    },
    { timestamps: true }
  )
  </code></pre>
  <p>Therefore, from the frontend I had to modify my form as follows:</p>
  <pre><code>type FormData = {
    title: string
    description: string
    categories: { category: string }[]
    language: string
    year: number
  }
  
   const {
      handleSubmit,
      control,
      formState: { errors },
    } = useForm&lt;FormData&gt;({
      mode: 'onBlur',
      defaultValues: {
        title: book.title ?? '',
        description: book.description ?? '',
        categories:
          book.categories.map((elem) =&gt; {
            return { category: elem }
          }) ?? '',
        language: book.language ?? '',
        year: book.publicationYear ?? '',
      },
    })
  </code></pre>
  <p>The problem is when call the api request. The network payload will look like this and therefore can't be sent to the backend
  <a href="https://i.stack.imgur.com/iM7Mp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iM7Mp.png" alt="enter image description here" /></a></p>