How can I add empty new fields by clicking on a button?

Question

How can I do to display a new row with empty fields Name, Type, Email for Inviteds section if I click on the +Add new invite ? For now I have only the button...

export default function App() {
  ...    
  let handleSubmit = async (e) => {
    e.preventDefault();
    try {
      let res = await fetch("", {
        method: "POST",
        body: JSON.stringify({
          location: location,             
          ...
        })
      });
      let resJson = await res.json();
      if (res.status === 200) {
        setLocation("");
        ...
      } 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>
      <button>+Add new invite</button>
      <form onSubmit={handleSubmit}>
        <span >
          Names:
        </span>
        <input
          type="text"
          value={invitedName}
          placeholder="Names"
          onChange={(e) => setInvitedName(e.target.value)}
        />           
      </form>
    </div>
  );
}

Here the picture to get the idea :

Answer 1

It seems during push transition, the old tableview are also grayed, which make the area below toolbar become gray.

My final solution is to make the toolbar extend to outside safe area by setting clip bounds to false.