use form to generate multiple forms with different submit button

multiple-form.js

import { useState } from "react";
import { useForm } from "react-hook-form";

function MyForm() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      title: "",
      description: ""
    }
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        placeholder="title"
        {...register("title", {
          required: true
        })}
      />
      <input
        placeholder="description"
        {...register("description", {
          required: true
        })}
      />
      <button>submit me</button>
    </form>
  );
}

export default function App() {
  const [testCount, setTestCount] = useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setTestCount((_testCount) => _testCount + 1);
        }}
      >
        add new form
      </button>
      {new Array(testCount).fill(null).map((_, idx) => {
        return <MyForm key={idx} />;
      })}
    </div>
  );
}

2nd solution with nanoid

import { useState } from "react";
import { useForm } from "react-hook-form";
import { nanoid } from "nanoid";

function MyForm() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      title: "",
      description: ""
    }
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        placeholder="title"
        {...register("title", {
          required: true
        })}
      />
      <input
        placeholder="description"
        {...register("description", {
          required: true
        })}
      />
      <button>submit me</button>
    </form>
  );
}

export default function App() {
  const [tests, setTests] = useState([]);

  return (
    <div>
      <button
        onClick={() => {
          setTests((_tests) => _tests.concat(nanoid()));
        }}
      >
        add new form
      </button>
      {tests.map((test) => (
        <MyForm key={test} />
      ))}
    </div>
  );
}