title: react material-table formik validation in custom edit component
body: <p>I'm using react-material-table.
  I'm trying to validate the row edit. </p>
  
  <p>Everything works fine for "native" material column. 
  But I had to use a custom editComponent for one column rendering an Autocomplete.</p>
  
  <pre><code>{
        title: "test",
        field: "foo",
        editComponent: (props) =&gt; {
  
  
          return (
            &lt;div&gt;
              &lt;Autocomplete
  
                onChange={(e, v) =&gt; this.handleFooChange(props.rowData.id, v)}
                //onChange={(e,v) =&gt; props.onChange(v)}
                id="people-company"
                options={[{ id: 1, name: "bar" }, { id: 2, name: "foo" }]}
                getOptionLabel={option =&gt; option.name}
  
                value={props.rowData.foo}
                filterSelectedOptions
                renderInput={params =&gt; (
                  &lt;TextField
                    {...params}
                    variant="outlined"
                    label="company"
                    placeholder="company"
                    margin="normal"
                    fullWidth
                  /&gt;
                )}
              /&gt;
            &lt;/div&gt;
          );
        },
  </code></pre>
  
  <p>My MaterialTable define EditRow and EditField</p>
  
  <pre><code>    const FormikMTInput = props =&gt; {
  
    return (
      &lt;Field name={props.columnDef.field}&gt;
        {({ field, form, meta }) =&gt; {
          const { name } = field;
          const { errors, setFieldValue } = form;
          //console.log("ShowError", errors);
          const showError = !!getIn(errors, name);
  
          return (
            &lt;div&gt;
              &lt;MTableEditField
                {...props}
                {...field}
                error={showError}
                onChange={newValue =&gt; setFieldValue(name, newValue)}
              /&gt;
              {errors[field.name] &amp;&amp; (
                &lt;div style={{ color: "#f44336" }}&gt;{errors[field.name]}&lt;/div&gt;
              )}
            &lt;/div&gt;
          );
        }}
      &lt;/Field&gt;
    );
  };
  
  const MuiTableEditRow = ({ onEditingApproved, ...props }) =&gt; {
  
    return(
    &lt;Formik
  
      validate={values =&gt; {
        const errors = {};
        if (!values.name) {
          errors.name = "Required";
        }
        if (!values.foo) {
          errors.foo = "Required";
        }
  
        return errors;
      }}
      initialValues={props.data}
      onSubmit={values =&gt; {
        if (values) {
          if (values.name.length &gt; 2 &amp;&amp; values.foo)
            onEditingApproved(props.mode, values, props.data);
        }
      }}
      render={({ submitForm }) =&gt; (
        &lt;MTableEditRow {...props} onEditingApproved={submitForm} /&gt;
      )}
    /&gt;
  )};
    &lt;MaterialTable
        title="Editable Preview"
        columns={this.state.columns}
        data={this.state.data}
        components={{
          EditRow: MuiTableEditRow,
          EditField: FormikMTInput
        }}
      /&gt;
  </code></pre>
  
  <p>FormikMTInput is well fired on "default" columns. It is not the case for the overwrited editComponent. How can I pass errors to this column?</p>
  
  <p>Here the <a href="https://codesandbox.io/s/quirky-mendeleev-6z42i?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">sandbox</a></p>