react hook to manage form

form.tsx

import { useFormFields } from '../lib/hooks/useFormFields';

type Props = {};

export default function Form({}: Props) {
  const [fields, handleFieldChange] = useFormFields({
    email: '',
    password: '',
  });

  function handleFormSubmit() {
    console.log(fields);
  }

  return (
    <form>
      <div>
        <label htmlFor="email">Enter Email</label>
        <input
          type="email"
          name="email"
          id="email"
          value={fields.email}
          onChange={handleFieldChange}
        />
      </div>
      <div>
        <label htmlFor="password">Enter Password</label>
        <input
          type="password"
          name="password"
          id="password"
          value={fields.password}
          onChange={handleFieldChange}
        />
      </div>
      <button type="button" onClick={handleFormSubmit}>
        Submit
      </button>
    </form>
  );
}

useFormFields.ts

import { useState, ChangeEvent, ChangeEventHandler } from 'react';

interface FieldsType {
  [key: string | symbol]: string;
}

export function useFormFields(
  initialState: FieldsType
): [FieldsType, ChangeEventHandler] {
  const [fields, setValues] = useState(initialState);

  return [
    fields,
    function (event: ChangeEvent<HTMLInputElement>) {
      setValues({
        ...fields,
        [event.target.id]: event.target.value,
      });
      return;
    },
  ];
}