title: Getting "A component is changing an uncontrolled input to be controlled (...)" when using KeyboardDatePicker
body: <p>A reproducible example can be found in <a href="https://codesandbox.io/s/material-demo-forked-wz7ub?file=/configuration/filters.tsx:798-828" rel="nofollow noreferrer">this link</a>.</p>
  <p>I'm starting with React and Hooks. Currently, I'm trying to build a configuration form to generate some reports. The first sub-component of my entire form that I'm building is a <code>Filter</code> component with only two dates (start and end dates).</p>
  <p>In the outer component called <code>Configuration</code> I have the form state and the start and end dates are passed by props to the <code>Filter</code> component as well the <code>onPeriodChange</code> callback:</p>
  <pre><code>export const Configuration: React.FC = () =&gt; {
    const [periodState, setPeriodState] = useState&lt;Period&gt;({
      startDate: '',
      endDate: '',
    });
  
    const handlePeriodChange = useCallback(
      (field: keyof Period, value: string) =&gt;
        setPeriodState({ ...periodState, [field]: value }),
      [periodState],
    );
  
    return (
      &lt;MuiPickersUtilsProvider utils={DateFnsUtils}&gt;
        &lt;form name=&quot;configuration&quot;&gt;
          &lt;Filters period={periodState} onPeriodChange={handlePeriodChange} /&gt;
        &lt;/form&gt;
      &lt;/MuiPickersUtilsProvider&gt;
    );
  };
  </code></pre>
  <p>Then, the props are passed to <code>KeyboardDatePicker</code> components in the <code>Filter</code> components:</p>
  <pre><code>export const Filters: React.FC&lt;FilterProps&gt; = (filterProps: FilterProps) =&gt; {
    const { period, onPeriodChange } = filterProps;
  
    return (
      (...)
        &lt;KeyboardDatePicker
          disableToolbar
          fullWidth
          variant=&quot;inline&quot;
          format=&quot;dd/MM/yyyy&quot;
          id=&quot;start-date&quot;
          label=&quot;Data de descarga inicial:&quot;
          value={period.startDate}
          onChange={(date) =&gt; {
            onPeriodChange(
              'startDate',
              date instanceof Date &amp;&amp; !Number.isNaN(date)
                ? date.toISOString()
                : '',
            );
          }}
          required
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        /&gt;
      (...)
    );
  };
  </code></pre>
  <p>In the first render, the components are displayed as invalid:</p>
  <p><a href="https://i.stack.imgur.com/gcs7L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gcs7L.png" alt="Invalid components" /></a></p>
  <p>And when I change the value of the first component I'm getting a console warning saying (you can reproduce this behavior in the sandbox):</p>
  <blockquote>
  <p>Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.</p>
  </blockquote>
  <p>I don't know why I'm getting this error, since the initial values of the start and end date are an empty string (and not undefined). Can you point me where is my mistake? Thanks!</p>