Extracting the input element to make it reusable!

import { useForm } from "@tanstack/react-form";
import ActionButton from "../../Common/Button/Button";

export default function LoginForm() {
  const form = useForm({
    defaultValues: {
      fullName: "Obaba",
      fine: true,
    },
    onSubmit: async ({ value }) => {
      // Do something with form data
      console.log(value);
    },
  });

  return (
    <div>
      <form.Provider>
        <form
          className="text-black"
          onSubmit={(e) => {
            e.preventDefault();
            e.stopPropagation();
            void form.handleSubmit();
          }}
        >
          <div>
            <form.Field name="fullName" children={(field) => <input name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.target.value)} />} />
            <form.Field name="fine" children={(field) => <input type="checkbox" name={field.name} checked={field.state.value} onChange={(e) => field.handleChange(e.target.checked)} />} />
          </div>
          <ActionButton text="Login" type="submit" />
        </form>
      </form.Provider>
    </div>
  );
}