Creates an array field on your form

useArrayField.ts

import { useEffect, useState } from 'react'
import { useFormContext } from 'react-hook-form'

export default function useArrayField<T>({ name, defaultValue = [] }: { name: string; defaultValue?: T[] }) {
  const { register, setValue, unregister } = useFormContext()
  const [items, setItems] = useState<T[]>(defaultValue)

  // Manually register our array field
  useEffect(() => {
    register({ name })

    return () => {
      unregister(name)
    }
  }, [])

  // Update the form value on change
  useEffect(() => {
    setValue(name, items)
  }, [items, name, setValue])

  return {
    items,
    insert(item: T, index: number) {
      setItems(items => {
        const tempItems = [...items]
        tempItems.splice(index, 0, item)
        return tempItems
      })
    },
    remove(index: number) {
      setItems(items => {
        const tempItems = [...items]
        tempItems.splice(index, 1)
        return tempItems
      })
    },
    append(item: T) {
      setItems(items => [...items, item])
    },
    prepend(item: T) {
      setItems(items => [item, ...items])
    },
  }
}