title: Example of using react-hook-form with a Date/Time Picker and using Material-UI?
body: <p>Does anyone have an example of using react-hook-form with a Date/Time Picker and using Material-UI? I have been able to implement with a Mui TextField that has a type of &quot;datetime-local&quot;, and I can set the Date/Time, but I have been unable to get a timestamp to appear in the field upon entering the form using default values for react-hook-form; that is, the date/time value doesn't appear in the picker. Upon manually setting the date/time value and submitting the form, the value is getting properly bound to the react-hook-form &quot;data&quot; object. Some fragments from my code are below.  I have replaced irrelevant code with ellipses (...).</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { Controller, useForm } from 'react-hook-form';
  import { TextField } from '@material-ui/core';
  ...
  
  interface IMyFormProps {
    name: string;
    description: string;
    occurrenceTimestamp: Date;
  }
  
  ...
  
  const MyForm: React.FC&lt;IMyFormProps&gt; = (props: IMyFormProps) =&gt; {
  
    ...
  
    // set up details for ReactHookForm
    const { register, control, formState, handleSubmit, errors } = useForm({
      defaultValues: {
        name: props.name,
        description: props.description,
        occurrenceTimestamp: props.occurrenceTimestamp
      },
      mode: "all"
    });
  
    ...
  
    return (
      &lt;form onSubmit=... 
          // a text input for Name
          &lt;TextField
            inputRef={register({ required: true })}
            name="name"
            label="Name"
            ...
          /&gt;
  
          // a text input for Description
          &lt;TextField
            inputRef={register({ required: true })}
            name="description"
            label="Description"
            ...
          /&gt;
  
          // The Date/Time Picker
          &lt;Controller
            render={(props) =&gt;
              &lt;TextField
                {...props}
                type="datetime-local"
                label="Occurrence Date/Time"
              /&gt;
            }
            name="occurrenceTimestamp"
            control={control}
          &gt;
          &lt;/Controller&gt;
  
      &gt;
      &lt;/form&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>