title: min and max date not working on formik/material-ui/datepicker component
body: <p>This is driving me crazy.  I can't get min and max date to work at all.  Here's my code:</p>
  <pre class="lang-html prettyprint-override"><code>          &lt;DatePickerField
              name={dob.name}
              label={dob.label}
              format=&quot;MM/DD/YYYY&quot;
              minDate={new Date('12/31/1920')}
              maxDate={new Date()}
              fullWidth
              onChange={(event, newdate) =&gt; { currentAge = calculateAge(newdate, currentAge); }}
            /&gt;
  </code></pre>
  <p>No matter what date I use, like 1/1/1800, it shows up in the input field for the date picker and the age shows  up as 220 years old (as an example).  Same goes if I pick a date in the future.  Age shows up as -whatever.  The calucateAge function is working fine, but DatePickerField is accepting ANY date.</p>
  <p>Why is it not forcing a min and max date?</p>
  <p>EDITED TO ADD BELOW:</p>
  <p>This is the DatePickerField I am using that I adapted from Formik:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { useField } from 'formik';
  import Grid from '@material-ui/core/Grid';
  import DateFnsUtils from '@date-io/date-fns';
  import {
    MuiPickersUtilsProvider,
    KeyboardDatePicker
  } from '@material-ui/pickers';
  
  const DatePickerField = props =&gt; {
    const [field, meta, helper] = useField(props);
    const { touched, error } = meta;
    const { setValue } = helper;
    const isError = touched &amp;&amp; error &amp;&amp; true;
    const { value } = field;
    const [selectedDate, setSelectedDate] = useState(null);
    //console.log(&quot;datepickerfield&quot; + JSON.stringify(field) + &quot;end of datepickerfield&quot;);
    useEffect(() =&gt; {
      if (value) {
        const date = new Date(value);
        setSelectedDate(date);
      }
    }, [value]);
  
    function _onChange(date) {
      if (date) {
        setSelectedDate(date);
        try {
          const ISODateString = date.toISOString();
          setValue(ISODateString);
        } catch (error) {
          setValue(date);
        }
      } else {
        setValue(date);
      }
    }
  
    return (
      &lt;Grid container&gt;
        &lt;MuiPickersUtilsProvider utils={DateFnsUtils}&gt;
          &lt;KeyboardDatePicker
            {...field}
            {...props}
            variant=&quot;inline&quot;
            format=&quot;MM/dd/yyyy&quot;
            value={selectedDate}
            onChange={_onChange}
            error={isError}
            invalidDateMessage={isError &amp;&amp; error}
            helperText={isError &amp;&amp; error}
            disableToolbar
            KeyboardButtonProps={{
              'aria-label': 'change date',
            }}
          /&gt;
        &lt;/MuiPickersUtilsProvider&gt;
      &lt;/Grid&gt;
    );
  }
  
  export default DatePickerField;
  </code></pre>
  <p>At this point I don't know if the problem lies in the call or the DatePickerField.jsx file itself.</p>
  <p>Any help would be truly appreciated!</p>