Javascript – React Pass Formik form valid state to parent component

In my react with typescript project I have a ParentComponent that has a ChildComponent where is a Formik with Yup form that has to be validated as the user types. On the ParentComponent I also have a next button that has to be disabled if there are validation errors as the user types on the form.

This is a code snip of ParentComponent:

const [isFormValid, setIsFormValid] = useState<boolean>(true);
const [isNextButtonDisabled, setIsNextButtonDisabled] = useState<boolean>(false);

useEffect(() => {
  if(!isFormValid) {
    setIsNextButtonDisabled(true);
  }
}, [isFormValid]);

const handleNext = () => {
    if (!isFormValid) {
      return;
    }
    
    goNext();
}

return (
<>
    <ChildComponent
        setIsFormValid={setIsFormValid}
        isFormValid={isFormValid}
    />
    
    <CustomButtonComponent
        type="submit"
        form="myFormikForm"
        isDisabled={isNextButtonDisabled}
    />
</>);

And this is the ChildComponent:

type FormProps = {
  isFormValid: boolean;
  setIsFormValid: React.Dispatch<React.SetStateAction<boolean>>;
};

export const ChildComponent: React.FC<FormProps> = ({
  isFormValid
  setIsFormValid,
}) => {
    return(
        <Formik
            initialValues={{email: ''}}
            onSubmit={() => {}}
            validationSchema={emailValidationSchema}
            validateOnChange={true}
            validateOnBlur={true}
        >
           {({ values, errors, handleChange}) => (
                <Form
                    id={"myFormikForm"}
                    controlId={"myFormikForm"}
                    value={values.email}
                    placeholder=""
                    isInvalid={!!errors.email}
                    error={errors.email}
                    onChange={() => {
                        if(errors.email) {
                            setIsFormValid(!isFormValid);
                        }
                    }}
                />
           )} 
 };

This is how I tried to implement it. The validation of the values inside the form works as expected, the validation messages from emailValidationSchema are correctly displayed under the field as the user types, but it seems like the valid state of the field ‘isFormValid’ doesn’t react the ParentComponent and I can’t disable or enable the button based on the validation state of the Formik form as the user types. How could I achive this?