Trouble building a field array component that can work with multiple forms

[alanshortis]

I am trying to build a field array component in TypeScript that can work with more than one form. To do this, I am trying to use a generic to pass the form fields interface, but I can't quite get the types right (it is working, but has type issues).

If I import my interface (that describes my form's fields) and use it in place of T everything works as expected, but with the generic I get some errors. Here's what I have:

import type { Control, FieldErrors, FieldValues } from 'react-hook-form'
import { useFieldArray } from 'react-hook-form'

interface Props<T extends FieldValues> {
  control: Control<T>
  errors: FieldErrors<T>
}

export function Tags<T extends FieldValues>({
  control,
  errors,
}: Props<T>) {
  const { fields, append, remove } = useFieldArray({
    name: 'tags',
    control,
    keyName: 'key',
    rules: { required: 'Please choose at least one tag' },
  })

  const handleTagChange = (tag: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value, checked } = tag.target

    if (checked) {
      append({ id: value, name })
    } else {
      const index = fields.findIndex((field) => field.id === value)
      remove(index)
    }
  }

  const tags = [
    { id: '1', name: 'tag1' },
    { id: '2', name: 'tag2' },
    { id: '3', name: 'tag3' },
  ]

  return (
    <>
      <div role="group" aria-labelledby="policy-tags">
        <p id="policy-tags">Tags</p>
        <div>
          {tags.map((tag) => (
            <>
              <label key={tag.id} htmlFor={tag.name}>
                {tag.name}
              </label>
              <input
                type="checkbox"
                onChange={(e) => handleTagChange(e)}
                key={tag.id}
                name={tag.name}
                value={tag.id}
                checked={fields.some((field) => field.id === tag.id)}
              />
            </>
          ))}
        </div>
        {errors?.tags?.root && <p>{errors.tags.root?.message || ''}</p>}
      </div>
    </>
  )
}

And the implementation:

<Tags<IFormFields> control={control} errors={errors} />

I am seeing these errors:

Any help or pointers would be really appreciated