title: react hook form with multiple react select as array of objects under the same property name
body: <p>Got a specific section in my react hook form with multiple react selects (list of react selects). I'd like them to be under the same property <code>attributes</code> such that it's an array of objects inside the react hook form data, though I'm not sure how to go about it using Controller or if it's the right approach</p>
  <p>goal for the react hook form data with the multiple react selects all under one property <code>attributes</code></p>
  <pre><code>{
    &quot;attributes&quot;: [
      {
         
         &quot;label&quot;: &quot;HAS_LEAVES&quot;,
         &quot;value&quot;: &quot;YES&quot;
      },
      {
         
         &quot;label&quot;: &quot;HAS_TRUNK&quot;,
         &quot;value&quot;: &quot;NO&quot;
      }
    ]
  }
  </code></pre>
  <p>however I'm getting this when user interacts with one of the react selects</p>
  <pre><code>  {
      &quot;HAS_LEAVES&quot;:{&quot;label&quot;: &quot;Yes&quot;, &quot;value&quot;: &quot;YES&quot;}
    }
  </code></pre>
  <p>react form</p>
  <pre><code>
  const selectOptions = [
      { value: &quot;YES&quot;, label: &quot;Yes&quot; },
      { value: &quot;NO&quot;, label: &quot;No&quot; },
  ];
  
  const attributes = [
  {
         
      &quot;label&quot;: &quot;Has Leaves&quot;,
      &quot;value&quot;: &quot;HAS_LEAVES&quot;
  },
  {
      
      &quot;label&quot;: &quot;Has Trunk&quot;,
      &quot;value&quot;: &quot;HAS_TRUNK&quot;
  }
  ]
  
  &lt;Controller
      name=&quot;attributes&quot;
      control={control}
      render={({ field }) =&gt; (
          &lt;ul&gt;
          {selectOptions &amp;&amp;
              selectOptions.length &gt; 0 &amp;&amp;
              attributes.map((attribute, idx) =&gt; {
              return (
                  &lt;li
                  key={idx}
                  &gt;
                  &lt;span&gt;{attribute.value}&lt;/span&gt;
                  &lt;span&gt;
                      &lt;Controller
                      name={attribute.value}
                      control={control}
                      render={({ field }) =&gt; (
                          &lt;ReactSelect
                          options={selectOptions}
                          {...field}
                          /&gt;
                      )}
                      /&gt;
                  &lt;/span&gt;
                  &lt;/li&gt;
              );
              })}
          &lt;/ul&gt;
      )}
  /&gt;
  </code></pre>