title: handle onChange using react custom component with formik
body: <p>I use custom react component with formik which is handled by sending the value where I use it and setting its own state from its parent, so onChange I am always set its react state besides setFieldvalue to set it in formik as I dont use handleChange from formik props.</p>
  
  <pre><code>     &lt;Field
      render={(fields: { field: object; form: formProps }) =&gt; {
          return (
              &lt;TextField
              name="title"
              error={errors.title &amp;&amp; touched.title}
              value={title}
              onKeyUp={() =&gt; null}
              onBlur={handleBlur}
              onChange={(e: { target: { value: string } }) =&gt;
                  this.props.onChange('title', e, fields.form)
              }
              placeholder="e.g Introduction to UX Design"
              /&gt;
          );
      }}
  /&gt;
  
  onChange = (
      stateField: string,
      e: { target: { value: string } },
      form: { setFieldValue: (field: string, value: string) =&gt; void }
  ) =&gt; {
  // the field is controlled twice here
      form.setFieldValue(stateField, e.target.value);
      this.setState({ [stateField]: e.target.value });
  };
  </code></pre>
  
  <p>it is working correct but it is a hassle for me to handle the two cases in each field and I am not feeling it is the best way to do so, any help ?</p>