title: How to validate KeyboardDatePicker with react-hook-form when date is invalid
body: <p>I am validating a material UI KeyboardDatePicker with react-hook-form:</p>
  <pre><code>            &lt;Controller
            name=&quot;endDate&quot;
            control={control}
            defaultValue={new Date()}
            rules={{
              required: &quot;End date is required&quot;
            }}
            render={({ field, fieldState }) =&gt; {
              return (
                &lt;KeyboardDatePicker
                  autoOk
                  variant=&quot;inline&quot;
                  inputVariant=&quot;standard&quot;
                  label=&quot;End Date&quot;
                  format=&quot;MM/dd/yyyy&quot;
                  value={field.value}
                  InputAdornmentProps={{ position: &quot;start&quot; }}
                  onChange={() =&gt; {
                    field.onChange();
                  }}
                  error={(!!fieldState.error || field.value === 'Invalid Date')}
                  helperText={
                    fieldState.error ? fieldState.error.message : null
                  }
                /&gt;
              );
            }}
          /&gt;
  </code></pre>
  <p>It works fine and throws the message &quot;End date is required&quot; if KeyboardDatePicker is empty. However I also need to throw an error message &quot;Invalid date format&quot; if user edits the date and removes a couple of characters like <strong>'06/01/2021'</strong> to <strong>'06/01/20__'</strong>. This functionality works built-in and works fine in isolation i.e. if I don't combine date picker with react-hook-form.
  However I am not getting how to achieve this in combination with react-hook-form. I tried to modify <code>helperText</code> but to no avail.</p>