title: Updating initialValues prop on Formik Form does not update input value
body: <p>I use a formik form with forward refs like so</p>
  <h3>Form.js</h3>
  <pre><code>import React from &quot;react&quot;;
  import FormikWithRef from &quot;./FormikWithRef&quot;;
  
  const Form = ({
    formRef,
    children,
    initialValues,
    validationSchema,
    onSubmit
  }) =&gt; {
    return (
      &lt;FormikWithRef
        validateOnChange={true}
        validateOnBlur={true}
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
        ref={formRef}
      &gt;
        {(props) =&gt; &lt;form onSubmit={props.handleSubmit}&gt;{children}&lt;/form&gt;}
      &lt;/FormikWithRef&gt;
    );
  };
  
  export default Form;
  </code></pre>
  <h3>FormikWithRef.js</h3>
  <pre><code>import React, { forwardRef, useImperativeHandle } from &quot;react&quot;;
  import { Formik } from &quot;formik&quot;;
  
  function FormikWithRef(props, ref) {
    let _formikProps = {};
  
    useImperativeHandle(ref, () =&gt; _formikProps);
  
    return (
      &lt;Formik {...props}&gt;
        {(formikProps) =&gt; {
          _formikProps = formikProps;
          if (typeof props.children === &quot;function&quot;) {
            return props.children(formikProps);
          }
          return props.children;
        }}
      &lt;/Formik&gt;
    );
  }
  
  export default forwardRef(FormikWithRef);
  </code></pre>
  <p>I have some tabs, that update an <code>easy-peasy</code> store state <code>type</code>, when I select the 2nd tab, I was wanting to update the input value (that initially comes from the store state of <code>value</code>) with a Formik form, but updating state <code>initialValues</code> specific to that component that gets passed as <code>initialValues</code> prop to the <code>Formik</code> component.</p>
  <h3>TabsForm.js</h3>
  <pre><code>import React, { useState, useEffect, useRef } from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import { useStoreState } from &quot;easy-peasy&quot;;
  import Form from &quot;./Form&quot;;
  import MoneyBox from &quot;./MoneyBox&quot;;
  
  const Container = styled.div`
    width: 100%;
    background-color: #dfdfdf;
  `;
  
  const FieldWrapper = styled.div`
    padding: 20px 12px;
  `;
  
  const TabsForm = () =&gt; {
    const [initialValues, setInitialValues] = useState();
  
    const type = useStoreState((state) =&gt; state.type);
    const value = useStoreState((state) =&gt; state.value);
  
    const formRef = useRef(null);
  
    const onFormSubmit = async (values) =&gt; {
      console.log({ values });
    };
  
    useEffect(() =&gt; {
      if (value &amp;&amp; type) {
        let filterVal = { ...value };
        /*  here is where I update the input value to be 3000, 
        the initial values get updated and in the `Form.js` file, 
        the console log from here also reflects this update,
        however, the input field does not update? */
        if (type === &quot;Two&quot;) filterVal.input = 30000;
        setInitialValues(filterVal);
      }
    }, [value, type]);
  
    useEffect(() =&gt; {
      //   check initialValues has updated
      console.log({ initialValues });
    }, [initialValues]);
  
    return (
      &lt;Container&gt;
        {initialValues &amp;&amp; type ? (
          &lt;Form
            initialValues={initialValues}
            onSubmit={onFormSubmit}
            formRef={formRef}
          &gt;
            &lt;FieldWrapper&gt;
              &lt;MoneyBox name=&quot;input&quot; currencySymbol={&quot;£&quot;} /&gt;
            &lt;/FieldWrapper&gt;
          &lt;/Form&gt;
        ) : null}
      &lt;/Container&gt;
    );
  };
  
  export default TabsForm;
  
  </code></pre>
  <p>When clicking the 2nd tab;</p>
  <ul>
  <li>The <code>initialValues</code> state in <code>TabsForms.js</code> updates so that <code>value.input</code> = <code>30000</code>;</li>
  <li>The <code>initialValues</code> prop in both <code>Form.js</code> and <code>FormikWithRef.js</code> also reflect that <code>value.input</code> = <code>3000</code></li>
  <li>However, the input does not update, using the <code>useField</code> hook from <code>forimk</code> in the <code>MoneyBox.js</code> component, the <code>field</code> object does not have a <code>value</code> of <code>30000</code>, instead it's whatever the field value was before, why is this?</li>
  </ul>
  <p>I have created a <a href="https://codesandbox.io/s/muddy-shape-z1ygv" rel="noreferrer">CodeSandbox</a> to see all the components used, and console logs to see that the Formik does receive the updated value, but doesn't seem to apply it.</p>
  <p>I've been stuck on this for a few days and can't seem to find a solution, any help would be greatly appreciated.</p>