How to handle form events in React Typescript

eventhandler.tsx

const handleInputChange = (event: FormEvent) => {
    const target = event.target as HTMLInputElement | HTMLSelectElement;
    const { name, value } = target;
    setFormData({ ...formData, [name]: value });
};

handle-checkbox.tsx

interface IFormData {
  alliance: string[];
  cabins: string[];
}

type CheckboxSections = "alliance" | "cabins";

const handleCheckbox = (event: FormEvent, stateKey: CheckboxSections) => {
    const target = event.target as HTMLInputElement;
    const { name, value } = target;

    let values;
    if (JSON.parse(value)) {
      values = formData[stateKey].filter((value) => value !== name);
    } else {
      values = [...formData[stateKey], name];
    }
    setFormData({ ...formData, [stateKey]: values });
  };

submit-form.tsx

  function handleSubmit(event: FormEvent) {
    event.preventDefault();
    const target = event.target as HTMLFormElement;

    submit(target, { replace: true }); // remix specific
  }