Formik form won’t clear out

I was trying to populate the initialValue of my formik form with its hoc data onClick. Clearing the form back to its first initialValue (initValues) when the reForm() is used does’nt work and it always goes back to the value from the prop.


const [contactData, setContactData] = useState();

<First userData={contactData}/>
<Second userData={setContactData}/>


function FirstComponent({userData}) {
    const [isUpdate, setUpdate] = useState(false);
    const initValues = {
        email: '',
        name: '',
        contact: ''
    useEffect(() => {
        // setContactData(userData)
        userData!==undefined ? setUpdate(true) : setUpdate(false);
        console.log("from form: ", userData)
    }, [userData]);
    const formik = useFormik({
        enableReinitialize: true,
        validationSchema: FormSchema,
        initialValues: userData || initValues,
        onSubmit: (values) => {
            // same shape as initial values
            console.log("the Data ", userData)
            console.log("onsubmit ", values);

    const resForm = () => {
        formik.initialValues = {initValues};
        console.log("prop ", userData)

        console.log("formik values ",formik.initialValues)

Replacing the initialValues with initValues in formik.resetForm() seems to work, but it makes the form reinitialize back with the userData prop – function FormComponent({userData})


partially fixed.. just modified the formik.resetForm() in resForm() to


but the prop (userData) from parent still persists when console logged in resForm()