title: Formik: target is undefined when passing Material UI Date Picker as prop to React Component
body: <p>I'm trying to create a reusable component. where I am passing the form fields as prop. when I click on datepicker field. I'm getting this error:</p>
  <blockquote>
  <p>TypeError: target is undefined</p>
  </blockquote>
  <p>How can I fix this?</p>
  <p>Here's how my input component looks like:</p>
  <pre><code>import { useField } from 'formik';
  import { DatePicker } from '@material-ui/pickers';
  
  export const DatePickerField = ({ label, ...props }) =&gt; {
    const [field, meta] = useField(props);
  
    return (
      &lt;DatePicker label={label} fullWidth {...field} {...props} /&gt;
    );
  };
  </code></pre>
  <p>Here's how the reusable component looks like:</p>
  <pre><code>import { Form } from 'formik'
  
  export const ReusableComp = ({ fields }) =&gt; (
    &lt;Form noValidate&gt;
        {fields}
    &lt;/Form&gt;
  )
  </code></pre>
  <p>Here's where I am using this component:</p>
  <pre><code>export const App = () =&gt; (
      &lt;ReusableComp fields={
        &lt;div className='mb-3'&gt;
          &lt;DateTimePickerField
            label='Start DateTime'
            name='start_date_time'
          /&gt;
        &lt;/div&gt;
      } /&gt;
  )
  </code></pre>
  <p>Result of <code>console.log(fields)</code></p>
  <p><a href="https://i.stack.imgur.com/LKS8V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LKS8V.png" alt="enter image description here" /></a></p>