Formik and Yelp Validation

import { useDispatch, useSelector } from "react-redux";
import React, { Fragment, useEffect, useRef, useState } from "react";
import * as Yup from "yup";
import { useFormik } from "formik";

const validationSchema = Yup.object({
  firstName: Yup.string().required("Required"),
  lastName: Yup.string().required("Required"),
});

export const Profile = ({ value }) => {
  const userReducer = useSelector((state) => state.userReducer);

  useEffect(() => {
    console.log(
      "profileuseerrrr",
      userReducer,
      userReducer?.loginUserPayload?.data?.user.firstName
    );
  }, [userReducer]);

  const formik = useFormik({
    initialValues: {
      firstName: userReducer?.loginUserPayload?.data?.user.firstName,
      lastName: userReducer?.loginUserPayload?.data?.user.lastName,
    },
    validationSchema,
    onSubmit(values) {
      console.log(values);
    },
    // validateOnMount: true,
  });

  console.log(
    "profileuseerrrr firsttname",
    formik.values.firstName,
    userReducer?.loginUserPayload?.data?.user.firstName
  );
  console.log("profile lastname", formik.values.verificationCode);
  console.log("profileuseerrrr errrorrrr", formik.errors);

  return (
    <>
      <div className="main-c-box">
        <div className="pagename">
          <a href="history.html">Profile</a>
        </div>
        <form onSubmit={formik.handleSubmit}>
          <div className="white-box">
            <div className="wb-main">
              <div className="row">
                <div className="col-md-6">
                  <div className="row">
                    <div className="col-md-6">
                      <div className="form-group">
                        <label for="">First Name</label>
                        <input
                          name="firstName"
                          onChange={formik.handleChange}
                          value={formik.values.firstName}
                        />
                      </div>
                    </div>
                    <div className="col-md-6">
                      <div className="form-group">
                        <label for="">Last Name</label>
                        <input
                          name="lastName"
                          onChange={formik.handleChange}
                          value={formik.values.lastName}
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div className="col-md-6">
                  <div className="profile-picture">
                    <div
                      className="profile-img"
                      style={{ backgroundImage: `url(img/19637.png)` }}
                    ></div>
                  </div>
                </div>
              </div>
            </div>
            <div className="lastbuttn">
              <button
                type="submit"
                className="big-btn"
                disabled={Object.keys(formik.errors).length !== 0}
              >
                Save
              </button>
            </div>
          </div>
        </form>
      </div>
    </>
  );
};