How do I insert checkbox in order to display X number of fields with REACT?

I tried to add a checkbox in my form in such a way to select a number of my invited people, it doesn't working. Then in function of this number X (for example 2), then X fields will be printed out. For now, in my form I have one field for a participant (see the picture). I

export default function App() {
  const [menu, setMenu] = useState("");
  const [location, setLocation] = useState("");
  const [invitedName, setInvitedName] = useState("");
  const [invitedFunction, setInvitedFunction] = useState("");
  const [invitedEmail, setInvitedEmail] = useState("");
  const [message, setMessage] = useState("");

  let handleSubmit = async (e) => {
    e.preventDefault();
    try {
      let res = await fetch("", {
        method: "POST",
        body: JSON.stringify({
          menu: menu,
          location: location,
          invitedName: invitedName,
          invitedFunction: invitedFunction,
          invitedEmail: invitedEmail
        })
      });
      let resJson = await res.json();
      if (res.status === 200) {
        setMenu("");
        setLocation("");
        setInvitedName("");
        setInvitedFunction("");
        setInvitedEmail("");
        message("Success");
      } else {
        setMessage("Some error occured");
      }
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div className="flex flex-col">
      ...
      <div className="mt-10 mb-3 h-6 text-md uppercase font-bold leading-8 text-gray-500">
        People
      </div>
      <form onSubmit={handleSubmit}>
        <span className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Names:
        </span>
        <input
          type="text"
          value={invitedName}
          placeholder="Names"
          onChange={(e) => setInvitedName(e.target.value)}
        />
        <span className="mr-3 h-6 text-md font-bold  leading-8 text-gray-500">
          Email:
        </span>
        <input
          type="text"
          value={invitedEmail}
          placeholder="Email"
          onChange={(e) => setInvitedEmail(e.target.value)}
        />
      </form>
    </div>
  );
}

Here my code

Here the picture to get the idea :