Formik validation on each mui stepper

I am using Material UI stepper and on each step I have different components. I am trying to validate each step using Yup and have used Formik but the instead of validating it moves on to next step. How can I validate this on every step and can get all the data of each step at last.

import React from 'react';
..
import FormStep1 from './FormStep1';
import FormStep2 from './FormStep2';


function getSteps() {
    return ['Select general campaign settings', 'Ads setting', 'Upload Ad contents', 'Review and Submit'];
}

function getStepContent(stepIndex, handleStepSubmit, handleNext) {
    switch (stepIndex) {
        case 0:
            return <FormStep1 onSubmit={handleStepSubmit} onNext={handleNext}/>;
        case 1:
            return <FormStep2 />;
        case 2:
            return 'No need to worry abt this!';
        default:
            return 'Unknown stepIndex';
    }
}

const IobdCampCreate = () => {

    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);
    const [state, setState] = React.useState({
        steps: [
            { name: 'Select general campaign settings', data: {} },
            { name: 'form2', data: {} }
        ],
        activeStep: 0,
    });
    const handleNext = () => {
        setActiveStep((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };

    const handleReset = () => {
        setActiveStep(0);
    };

    const handleStepSubmit = (stepIndex, data) => {
        console.log("-------", stepIndex, data)
        setState((prevState) => ({
            ...prevState,
            activeStep: prevState.activeStep + 1,
            steps: prevState.steps.map((step, index) => {
                if (stepIndex !== index) {
                    return step;
                }
                return {
                    ...step,
                    data
                }
            })
        }))
    }
    return (
        <React.Fragment>

            <div className={classes.root}>
                <Stepper activeStep={activeStep} alternativeLabel>
                    {state.steps.map((label) => (
                        <Step key={label.name}>
                            <StepLabel>{label.name}</StepLabel>
                        </Step>
                    ))}
                </Stepper>
                <div>
                    {activeStep === state.steps.length ? (
                        <div>
                            <Typography className={classes.instructions}>All steps completed</Typography>
                            <Button onClick={handleReset}>Reset</Button>
                        </div>
                    ) : (
                            <div>
                                <div className={classes.instructions}>
                                    {getStepContent(activeStep, handleStepSubmit,handleNext )}
                                </div>
                                <div>
                                    <Button
                                        disabled={activeStep === 0}
                                        onClick={handleBack}
                                        className={classes.backButton}
                                    >
                                        Back
                                    </Button>
                                    <Button variant="contained" color="primary" onClick={handleNext}>
                                        {activeStep === state.steps.length - 1 ? 'Finish' : 'Next'}
                                    </Button>
                                </div>
                            </div>
                        )}
                </div>
            </div>


        </React.Fragment>
    );
};

export default IobdCampCreate;

Here is a the formstep1.js

import React from 'react';
import { Formik } from 'formik';

const FormStep1 = (props) => (

    <div>
        <h3>Form A</h3>
        <Formik
            initialValues={{ email: '', password: '' }}
            validate={values => {
                const errors = {};
                if (!values.email) {
                    errors.email = 'Required';
                } else if (
                    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
                ) {
                    errors.email = 'Invalid email address';
                }
                return errors;
            }}
            onSubmit={(values) => {
                props.onSubmit(0, values);
            }}
        >
            {({
                values,
                errors,
                touched,
                handleChange,
                handleBlur,
                handleSubmit,
                isSubmitting,
                /* and other goodies */
            }) => (
                    <form onSubmit={handleSubmit}>
                        <input
                            type="email"
                            name="email"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.email}
                        />
                        {errors.email && touched.email && errors.email}
                        <input
                            type="password"
                            name="password"
                            onChange={handleChange}
                            onBlur={handleBlur}
                            value={values.password}
                        />
                        {errors.password && touched.password && errors.password}
                                                
                        <button variant="contained" color="primary" type="submit" >
                            Next
                        </button>
                    </form>
                )}
        </Formik>
    </div>
);

export default FormStep1;