title: Register third party- custom component with react-hook-form
body: <p>I am using <code>react-hook-form</code> and using third party <code>DatePicker</code>. Since it's a custom component using it as a controlled component to register it. This works fine</p>
  <pre><code>&lt;Controller
      control={control}
      name=&quot;reviewStartDate&quot;
      render={({ field: { onChange, onBlur, value } }) =&gt; (
          &lt;DatePicker
              className={`form-control ${errors.reviewStartDate ? 'is-invalid' : ''}`}
              customInput={&lt;input /&gt;}
              wrapperClassName=&quot;datePicker&quot;
              onChange={onChange}
              onBlur={onBlur}
              selected={value ? new Date(value) : ''}
              dateFormat='dd-MMM-yyyy'
          /&gt;
      )}
  /&gt;
  </code></pre>
  <p>Similarly/however, I am using thirdparty <code>Multiselect</code>. Here the value is not being registered. It does show the selected value but when I submit the form the value is not present in data.</p>
  <pre><code>&lt;Controller
      control={control}
      name=&quot;rootCauseAnalysisCategory&quot;
      render={({ field: { value } }) =&gt; (
          &lt;Multiselect
              options={rootCauseAnalysisCategorys}
              isObject={false}
              showCheckbox={true}
              hidePlaceholder={true}
              closeOnSelect={false}
              selectedValues={value}
          /&gt;
      )}
  /&gt;
  </code></pre>
  <p>Similarly</p>