How does using the useState hook compare to the formData method for handling form data in React?

I’m looking forward for the easiy and understandable explanation of the difference between useState and formData method for handling form data in React.

Example code with useState:

const InitialForm = {
  amount: 0,
  descritpion: "",
};
export default function TransactionForm({ fetchTransaction, editTransaction }) {
  const [form, setForm] = useState(InitialForm);
  function handleInput(e) {
    setForm({ ...form, [e.target.name]: e.target.value });
  }
 <form onSubmit={handleSubmit}>
          <TextField
            type="number"
            name="amount"
            value={form.amount}
            onChange={handleInput}
          />
          <TextField
            name="descritpion"
            value={form.descritpion}
            onChange={handleInput}
          />
          <Button type="submit">Submit</Button>
          )}
  </form>
}

Example code with Form Data:

export default function TransactionForm({ fetchTransaction, editTransaction }) {
  function handleInput(e) {
    const data = new FormData(event.currentTarget);
  }
 <form onSubmit={handleSubmit}>
          <TextField
            type="number"
            name="amount"
            value={form.amount}
            onChange={handleInput}
          />
          <TextField
            name="descritpion"
            value={form.descritpion}
            onChange={handleInput}
          />
          <Button type="submit">Submit</Button>
          )}
  </form>
}

Thank you in advance

I’m looking forn better solution for handling form data in React