title: Formik and Material-UI
body: <p>I am trying to use Formik with Material-UI text field. Like so:</p>
  
  <pre><code>import TextField from '@material-ui/core/TextField';
  import {
    Field,
    FieldProps,
    Form,
    Formik,
    FormikErrors,
    FormikProps
  } from 'formik';
  import React, { Component } from 'react';
  
  interface IMyFormValues {
    firstName: string;
  }
  
  class CreateAgreementForm extends Component&lt;{}&gt; {
    public render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;My Example&lt;/h1&gt;
          &lt;Formik
            initialValues={{ firstName: '' }}
            // tslint:disable-next-line:jsx-no-lambda
            onSubmit={(values: IMyFormValues) =&gt; alert(JSON.stringify(values))}
            // tslint:disable-next-line:jsx-no-lambda
            validate={(values: IMyFormValues) =&gt; {
              const errors: FormikErrors&lt;IMyFormValues&gt; = {};
              if (!values.firstName) {
                errors.firstName = 'Required';
              }
              return errors;
            }}
            // tslint:disable-next-line:jsx-no-lambda
            render={(formikBag: FormikProps&lt;IMyFormValues&gt;) =&gt; (
              &lt;Form&gt;
                &lt;Field
                  name="firstName"
                  render={({ field, form }: FieldProps&lt;IMyFormValues&gt;) =&gt; (
                    &lt;TextField
                      error={Boolean(
                        form.errors.firstName &amp;&amp; form.touched.firstName
                      )}
                      helperText={
                        form.errors.firstName &amp;&amp;
                        form.touched.firstName &amp;&amp;
                        String(form.errors.firstName)
                      }
                    /&gt;
                  )}
                /&gt;
              &lt;/Form&gt;
            )}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default CreateAgreementForm;
  </code></pre>
  
  <p>I want Formik to be responsible for validation and Material-UI for looks.
  I want to pass errors.firstName to TextField component but the error doesn't display correctly. How can I fix it so it still will be clear to read? I don't want to write my own TextField component.</p>