React hook form append custom key value

export default function TagInput() {
  const [tags, setTags] = useState<string[]>([])
  const [fullTags, setFullTags] = useState<string>('')
  const { control, register } = useForm()
  const { isSubmitting, errors } = useFormState()
  const { fields, append, prepend, remove, swap, move, insert } = useFieldArray(
    {
      control, // control props comes from useForm (optional: if you are using FormContext)
      name: 'tags', // unique name for your Field Array
    }
  )

  const addTag = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === ',' || event.key === 'Enter') {
      event.preventDefault()
      const tagName = event.currentTarget.value.trim()
      if (tagName !== '' && !tags.includes(tagName)) {
        setTags((array) => [...array, tagName])
        // save each tags comma separated to a new string
        setFullTags((string) => string + tagName + ',')

        // append to full tags as "tags" field
        append({ name: fullTags })
      }

      event.currentTarget.value = ''
    }
  }

  const deleteTag = (tag: string) => {
    const newTags = tags.filter((t) => t !== tag)
    setTags(newTags)
  }

  return (
    <>
      <div className="grid grid-cols-6 gap-6">
        <div className="col-span-6 sm:col-span-3">
          <Label htmlFor="tags">Tags</Label>
          <Input
            onKeyDown={(event) => addTag(event)}