Formik form example with using custom hooks.

FormikFormExample.js

import React from "react";
import { useFormik } from "formik";

export default () => {
  const { handleChange, handleSubmit, values, errors } = useFormik({
    validationSchema: userInfoSchema,
    initialValues: {
      firstName: "",
      lastName: "",
      email: ""
    },
    validateOnChange: true,
    onSubmit: (values) => {
      console.log("values", values);
    }
  });

  return (
    <div>
      <div>
        <label htmlFor="firstName">First Name:</label>
        <input
          id="firstName"
          name="firstName"
          type="text"
          onChange={handleChange}
          value={values.firstName}
        />
        <div className="error">{errors.firstName}</div>
      </div>
      <div>
        <label htmlFor="lastName">Last Name:</label>
        <input
          id="lastName"
          name="lastName"
          type="text"
          onChange={handleChange}
          value={values.lastName}
        />
        <div className="error">{errors.lastName}</div>
      </div>
      <div>
        <label htmlFor="email">Email:</label>
        <input
          id="email"
          name="email"
          type="text"
          onChange={handleChange}
          value={values.email}
        />
        <div className="error">{errors.email}</div>
      </div>
      <button type="button" onClick={handleSubmit}>
        Submit
      </button>
    </div>
  );
};