title: How to use react-hook-form with my customized react-date-picker?
body: <p>I am trying to use react-hook-form with my customized date-picker, but I only see this example (<a href="https://stackoverflow.com/questions/60864610/is-it-possible-to-use-react-datepicker-with-react-hooks-forms">Is it possible to use react-datepicker with react hooks forms?</a>), which is using the default react-date-picker.</p>
  
  <p>However, it just only works on the original react-date-picker. 
  I tried the same way with my customized date-picker, and it doesn't work...</p>
  
  <p>This is my customized date-picker:</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, { useState } from 'react';
  import ReactDatePicker from 'react-datepicker';
  import tw from "date-fns/locale/zh-TW";
  
  import "react-datepicker/dist/react-datepicker.css";
  
  const DatePicker = props =&gt; {
      const [date, setDate] = useState('');
      return (
          &lt;ReactDatePicker
              className="form-control"
              selected={date}
              onChange={date =&gt; setDate(date)}
              locale={tw}
              dateFormat="yyyy/MM/dd"
              dateFormatCalendar="yyyy年 MM月"
              isClearable
          /&gt;
      )
  };
  
  export default DatePicker;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is how I use react-hook-form with my customized date-picker:</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 { useForm, Controller } from 'react-hook-form';
  import DatePicker from '../../components/UI/Form/DatePicker';
  
  const Form = props =&gt; {
      const { register, handleSubmit, control} = useForm();
  
      const onSubmit = (data) =&gt; {
          console.log(data);
      }
      return (
          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
              &lt;label&gt;First Name:&lt;/label&gt;
              &lt;input type="text" name='firstName' ref={register} /&gt;
  
              &lt;label&gt;Last Name:&lt;/label&gt;
              &lt;input type='text' name='lastName' ref={register} /&gt;
  
              &lt;label&gt;birthday:&lt;/label&gt;
              &lt;Controller as={DatePicker} control={control} valueName="selected" name="birthday" /&gt;
  
              &lt;input type="submit" value="Submit" /&gt;
          &lt;/form&gt;
      );
  }
  
  export default Form;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After I submit the form, the 'birthday' value is undefined.
  Do I still need to add any props to my customized date-picker?</p>
  
  <p>{
    birthday: undefined,
    firstName: "Mike",
    lastName: "Smith"
  }</p>