title: React-datepicker validation using react-hook-form
body: <p>I want to validate react-datepicker using react-hook-form and when i try it, its not working for me, also the validation message will not display. It is possible to put <code>ref</code> inside the DatePicker?</p>
  <p>This is the version of react-hook-form that I used.</p>
  <blockquote>
  <p>&quot;react-hook-form&quot;: &quot;^6.15.8&quot;</p>
  </blockquote>
  <p>This is my code</p>
  <pre><code>import React from &quot;react&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  import DatePicker from &quot;react-datepicker&quot;;
  import &quot;react-datepicker/dist/react-datepicker.css&quot;;
  
  function Account() {
      const {
      register,
      handleSubmit,
      formState: { errors },
    } = useForm({ mode: &quot;all&quot; });
  
  const [birthdate, setBirthdate] = useState(null);
  
      return (
          &lt;div className=&quot;flex flex-col mx-5 my-2 space-y-2&quot;&gt;
                    &lt;DatePicker
                      className=&quot;birthdate border-2 border-pink-300 placeholder-gray-500 rounded-2xl w-full h-12 p-5 outline-none&quot;
                      type=&quot;birthdate&quot;
                      name=&quot;birthdate&quot;
                      placeholderText=&quot;Birthdate&quot;
                      selected={birthdate}
                      dateFormat=&quot;yyyy-MM-dd&quot;
                      onChange={(date) =&gt; {
                        setBirthdate(date);
                      }}
                      peekNextMonth
                      showMonthDropdown
                      showYearDropdown
                      dropdownMode=&quot;select&quot;
                      closeOnScroll={true}
                      disabledKeyboardNavigation
                      ref={register({
                        required: {
                          value: true,
                          message: &quot;*Birthdate is required&quot;,
                        },
                      })}
                    /&gt;
                    {errors.birthdate &amp;&amp; (
                      &lt;p className=&quot;text-red-600 text-sm cursor-default&quot;&gt;
                        {errors.birthdate.message}
                      &lt;/p&gt;
                    )}
                  &lt;/div&gt;
      )
  }
  
  export default Account
  </code></pre>
  <p>For the CSS Im using tailwind CSS Framework.</p>