Formik nd Yup

import React from 'react'
import { useFormik } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object({
  firstName: Yup.string().required("Required"),
  lastName: Yup.string().min(3).required("Required"),
  email: Yup.string().email().required("Required"),


});
export default function Register() {
    const { handleSubmit, handleChange, values, errors } = useFormik({
        initialValues: {
            firstName: '',
            lastName: '',
            email: '',
        },
        validationSchema,
        onSubmit: values => {
            alert(JSON.stringify(values, null, 2));
        },
    });
    return (
        <form onSubmit={handleSubmit}>
            <label htmlFor="firstName">First Name</label>
            <input
                id="firstName"
                name="firstName"
                type="text"
                onChange={handleChange}
                value={values.firstName}
            />
            {errors.firstName ? errors.firstName : null}
            <label htmlFor="lastName">Last Name</label>
            <input
                id="lastName"
                name="lastName"
                type="text"
                onChange={handleChange}
                value={values.lastName}
            />
            {errors.lastName ? errors.lastName : null}

            <label htmlFor="email">Email Address</label>
            <input
                id="email"
                name="email"
                onChange={handleChange}
                value={values.email}
            />
            {errors.email ? errors.email : null}

            <button type="submit">Submit</button>
        </form>
    )
}