All of the form fields are belong to Redux - Consuming information in React and stateful persistence - Submit Form

SubmitForm.tsx

import * as React from "react";
import { useFormik } from "formik";
import { useSelector } from "react-redux";
import type { RootState } from "../../redux/store";

export default function SubmitForm({ handleSubmit }: any) {
  const form = useSelector((state: RootState) => state.form.value);

  const handleSubmitForm = async (form: any) => {
    return await handleSubmit(form);
  };

  const formik = useFormik({
    initialValues: {},
    onSubmit: () => {
      return handleSubmitForm(form);
    },
  });

  return (
    <React.Fragment>
      <section className="block h-auto w-auto">
        <form
          onSubmit={formik.handleSubmit}
          className="flex flex-col flex-nowrap justify-center mt-9"
        >
          <button
            type="submit"
            className="block w-full p-3 mx-auto font-slab uppercase text-xl min-[2000px]:text-2xl font-bold subpixel-antialiased text-darkoff border border-light rounded bg-light hover:text-light hover:bg-darkoff hover:border-light active:text-light active:bg-darkoff active:border-light"
          >
            Submit
          </button>
        </form>
      </section>
    </React.Fragment>
  );
}