title: How to read value from react-hook-form from another component
body: <p>I have following form base on <a href="https://react-hook-form.com" rel="nofollow noreferrer"><code>react-hook-form</code></a>:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>function App() {
      const {
          register,
          handleSubmit,
          errors,
          setError,
          clearError,
          formState: { isSubmitting }
      } = useForm();
  
      const onSubmit = data =&gt; {
          alert(JSON.stringify(data));
      };
  
      return (    
          &lt;form className="App" onSubmit={handleSubmit(onSubmit)}&gt;
              &lt;label&gt;Ethnicity&lt;/label&gt;
              &lt;SelectEthnicity/&gt;
  
              &lt;input disabled={isSubmitting} type="submit" /&gt;
  
          &lt;/form&gt;
      );
  }
  
  export default App;
  </code></pre>
  
  <p><code>SelectEthnicity</code> is just a wrapper component based on select as follows. I had to do it because it is very long select with many options. </p>
  
  <pre><code>export class SelectEthnicity extends Component {
      state = {
  
      };
  
      render() {
          return (
              &lt;div&gt;
                  &lt;select name="Selectethnicity"&gt;
                      &lt;option value=""&gt;Select...&lt;/option&gt;
                      &lt;option value="white"&gt;White&lt;/option&gt;
                      &lt;option value="black"&gt;Black&lt;/option&gt;
                      &lt;option value="multiracial"&gt;Multiracial&lt;/option&gt;
                      &lt;option value="european"&gt;European&lt;/option&gt;
                      &lt;option value="poles"&gt;Poles&lt;/option&gt;
                      &lt;option value="bashkirs"&gt;Bashkirs&lt;/option&gt;
                      &lt;option value="slavs"&gt;Slavs&lt;/option&gt;
                      &lt;option value="russian"&gt;Russian&lt;/option&gt;
                      &lt;option value="romani"&gt;Romani&lt;/option&gt;
                      &lt;option value="chechens"&gt;Chechens&lt;/option&gt;
                      // didn't add all long option. 
  
                  &lt;/select&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default SelectEthnicity
  </code></pre>
  
  <p>How can I get the selected option when the form is submitted from the App component?  </p>