Build a Stepper Form with validation using a NPM package [ formik-stepper ]

import React from "react";import * as Yup from "yup"import { FormikStepper, FormikStep, InputField } from "formik-stepper";const validationSchema = Yup.object().shape({  firstName: Yup.string().required("The First Name field is required"),  lastName: Yup.string().required("The Last Name field is required"),  email: Yup.string()    .email("The email must be a valid email address.")    .required("The Email field is required"),  password: Yup.string()    .required("The Password field is required")    .matches(      /^(?=.*[A-Za-z])(?=.*\d)(?=.*)[A-Za-z\d]{8,}$/,      `Must Contain 8 Characters, One Uppercase, One Lowercase,      One Number and one special case Character [@$!%*#?&-_]`    ),  privacy: Yup.boolean()    .isTrue()    .oneOf([true], "The terms and conditions must be accepted."),});export const FormStepper = () => {const onSubmit = async ( values, { setSubmitting } ) => {      console.log(values);      setSubmitting(false); //// Important  };    return(       <FormikStepper            /// Accept all Formik props            onSubmit={onSubmit} /// onSubmit Function            initialValues={{              firstName: "",              lastName: "",              email: "",              password: "",              privacy: false,            }}            validationSchema={validationSchema}            labelsColor="secondary" /// The text label color can be root variables or css => #fff            withStepperLine /// false as default and If it is false, it hides stepper line            nextBtnLabel="step" /// Next as default            prevBtnLabel="return" /// Prev as default            submitBtnLabel="Done" /// Submit as default            nextBtnColor="primary" /// as default and The color can be root variables or css => #fff            prevBtnColor="danger" /// as default and The color can be root variables or css => #fff            submitBtnColor="success" /// as default and The color can be root variables or css => #fff          >            {/*  First Step */}            <FormikStep              label="Profile Info" /// The text label of Step              withIcons="fa fa-user" // to add icon into the circle must add icon as class Name like Fontawesome              withNumbers /// If true, it hides the icon and shows the step number              iconColor="white" /// The color can be root variables or css => #fff              circleColor="danger" /// The color can be root variables or css => #fff            >              <InputField name="firstName" label="First Name"></InputField>              <InputField name="lastName" label="Last Name" />            </FormikStep>            {/* Second Step */}            <FormikStep              label="Login Info"              withIcons="fa fa-lock"              iconColor="white"              circleColor="danger"            >              <InputField name="email" label="Email" type="email" />              <InputField name="password" label="password" type="password" />              <div>                <InputField name="privacy" label="privacy" type="checkbox" />              </div>            </FormikStep>          </FormikStepper>    ););