title: React hook form how to pass value from custom component to controller with already assign own on change?
body: <p>I'm working on react-hook-form  need you guys help. I have my own component call &quot;Input&quot; So Just want to register with  but This Input component already assigned &quot;Onclick&quot; and &quot;value&quot; props so how to get Onchange and value to validate this input?</p>
  <pre><code>                          &lt;Controller
                                      control={control}
                                      name=&quot;ProvinceInput&quot;
                                      rules={{ required: true }}
                                      render={({ field: { onChange, onBlur, value, ref } }) =&gt; (
                                          &lt;Input
                                              type=&quot;Province&quot;
                                              onChange={setProvince}
                                              onSelect={onSelect}
                                              value={province}
                                              address={{
                                                  province,
                                                  amphoe,
                                                  district,
                                                  zipcode
                                              }}
                                          /&gt;
                                      )}
                                  /&gt;
  {errors.ProvinceInput &amp;&amp; &lt;span className='mt-2 text-sm text-red-400' &gt;This field is required&lt;/span&gt;}
  </code></pre>
  <p>I follow on React-hook-form Docs
  <a href="https://i.stack.imgur.com/afwfF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/afwfF.png" alt="enter image description here" /></a>
  As you can see The component work fine but can't validate &quot;ProvinceInput&quot; That register. please help me, Thanks</p>