【React】react-hook-formで動的フォームを作る

import { useForm, useFieldArray } from "react-hook-form";

const Index = () => {
  const { control, register } = useForm({
    defaultValues: { sampleText: [{ value: '' }] },
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "sampleText",
  });

  return (
    <>
      {fields.map((field, index) => (
        <div key={index}>
          <input key={field.id} {...register(`sampleText.${index}.value`)} />
          <button onClick={() => remove(index)}>削除</button>
        </div>
      ))}
      <button onClick={() => append({ value: '' })}>追加</button>
    </>
  );
};

export default Index;