title: React Hook Form Controller with dynamic items issue
body: <p>I'm trying to implement dropdown component in react-native which is relying on react-hook-form.</p>
  <p>So:</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>&lt;Controller
      as={
              &lt;TouchableOpacity&gt;
                  &lt;Text&gt;1234&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
      }
      onChangeName={'onPress'}
      onChange={(item) =&gt; console.log('clicked!')}
      control={control}
      name={name}
  /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Works as intended</p>
  <p>But in case of multiple elements it doesn't work:</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>&lt;Controller
      as={
         &lt;&gt;
             {options.map((item) =&gt; {
                 &lt;TouchableOpacity&gt;
                     &lt;Text&gt;{item.text}&lt;/Text&gt;
                 &lt;/TouchableOpacity&gt;
             })}
         &lt;/&gt;
      onChangeName={'onPress'}
      onChange={(item) =&gt; console.log('clicked!')}
      control={control}
      name={name}
  /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I understand that's probably Controller is trying to bind his &quot;onChange&quot; event with top component  which is in this case just a wrapper, is there any way to specify that's Controller &quot;onChange&quot; event supposed to be binded to child components?</p>