title: Some fields in a Formik form are not updating
body: <p>I have a special <code>TextField</code> wrapper for a Material-UI field that seems to be working well. For some reason when I use native Material UI fields, they do not update the form data upon submission.</p>
  <p>Here is the relevant code (but I've added a code sandbox at the end of the post to help demonstrate the issue)</p>
  <p><strong>TestForm.tsx</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { Card, CardActions, CardContent } from &quot;@material-ui/core&quot;;
  import { Form, Formik, Field } from &quot;formik&quot;;
  import React from &quot;react&quot;;
  import SubmitButton from &quot;../../SubmitButton&quot;;
  import CancelButton from &quot;../../CancelButton&quot;;
  import TextField from &quot;../../TextField&quot;;
  import MuiTextField from &quot;@material-ui/core/TextField&quot;;
  
  interface TestFormProps {
    onSave: (fields: FormFields) =&gt; void;
    onCancel: () =&gt; void;
  }
  
  export interface FormFields {
    textField: string;
    numericField: number;
    materialField: string;
    materialFieldFromComponent: string;
  }
  
  const initialValues: FormFields = {
    textField: &quot;Default Text&quot;,
    numericField: 42,
    materialField: &quot;Default Mui&quot;,
    materialFieldFromComponent: &quot;Default Mui from Component&quot;
  };
  
  const TestForm: React.FC&lt;TestFormProps&gt; = ({ onCancel, onSave }) =&gt; {
    return (
      &lt;Formik
        initialValues={initialValues}
        onSubmit={async (fields, { setSubmitting }) =&gt; {
          setSubmitting(true);
          onSave(fields);
        }}
      &gt;
        {({ isSubmitting }) =&gt; (
          &lt;Form&gt;
            &lt;Card&gt;
              &lt;CardContent&gt;
                &lt;TextField name=&quot;textField&quot; label=&quot;Text field&quot; /&gt;
                &lt;TextField
                  name=&quot;numericField&quot;
                  type=&quot;number&quot;
                  label=&quot;Numeric field&quot;
                /&gt;
                &lt;div&gt;
                  &lt;MuiTextField
                    name=&quot;materialField&quot;
                    label=&quot;Mui field&quot;
                    variant=&quot;outlined&quot;
                    margin=&quot;dense&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;Field
                  name=&quot;materialFieldFromComponent&quot;
                  label=&quot;Mui field from Component&quot;
                  variant=&quot;outlined&quot;
                  margin=&quot;dense&quot;
                  component={MuiTextField}
                /&gt;
              &lt;/CardContent&gt;
              &lt;CardActions&gt;
                &lt;SubmitButton disabled={isSubmitting} /&gt;
                &lt;CancelButton onCancel={onCancel} /&gt;
              &lt;/CardActions&gt;
            &lt;/Card&gt;
          &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
    );
  };
  
  export default TestForm;
  </code></pre>
  <p><strong>TextField.tsx</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { FieldAttributes, useField } from &quot;formik&quot;;
  import {
    InputBaseComponentProps,
    TextField as MuiTextField
  } from &quot;@material-ui/core&quot;;
  
  interface TextFieldProps {
    label: string;
    inline?: boolean;
    inputProps?: InputBaseComponentProps;
  }
  
  const Field: React.FC&lt;FieldAttributes&lt;TextFieldProps&gt;&gt; = (props) =&gt; {
    const { type, label, placeholder, inputProps } = props;
    const [field, meta] = useField&lt;TextFieldProps&gt;(props);
    const errorText = meta.error &amp;&amp; meta.touched ? meta.error : &quot;&quot;;
  
    return (
      &lt;MuiTextField
        {...field}
        label={label}
        variant=&quot;outlined&quot;
        margin=&quot;dense&quot;
        type={type}
        placeholder={placeholder ? placeholder : label}
        helperText={errorText}
        error={!!errorText}
        inputProps={inputProps}
      /&gt;
    );
  };
  
  const TextField: React.FC&lt;FieldAttributes&lt;TextFieldProps&gt;&gt; = ({
    inline = false,
    ...props
  }) =&gt; {
    return inline ? (
      &lt;Field {...props} /&gt;
    ) : (
      &lt;div&gt;
        &lt;Field {...props} /&gt;
      &lt;/div&gt;
    );
  };
  
  export default TextField;
  </code></pre>
  <p>Here's the code sandbox:</p>
  <p><a href="https://codesandbox.io/s/recursing-northcutt-5deen" rel="nofollow noreferrer">https://codesandbox.io/s/recursing-northcutt-5deen</a></p>