title: How to set array in useForm and validate the length of value?
body: <p>I'm using react-hook-form.<br/>
  What I wanna do is to push a value to an array and
  validate the length of value.
  <br/> This is defaultValue.</p>
  <pre class="lang-js prettyprint-override"><code>    defaultValues: {
        title: '',
        role: '',
        language: {source: '', target: []},
        industry: '',
        due_at: '',
        content: '',
      },
  </code></pre>
  <p>and this is input field that handles <code>language.target</code>.</p>
  <pre class="lang-js prettyprint-override"><code>&lt;Controller
      name=&quot;language.target&quot;
      control={control}
      rules={{
      required: true,
      setValues: (v) =&gt; setValue([...getValues('language.target'), v.value]),
      validate: (value) =&gt; {
      return '';
       },
        }}
      render={({field: {onChange}}) =&gt; (
         &lt;Select
             options={languageIndex}
             onChange={(value) =&gt; onChange(value.value)}
             value={languageIndex.filter(
             (item) =&gt; item.value === getValues('language.target')
                )}
             placeholder=&quot;Select&quot;
             /&gt;
         )}
   /&gt;
  </code></pre>
  <p>I tried this way to push a value like below and they didn't work..</p>
  <ul>
  <li><code>setValues: (v) =&gt; setValue([...getValues('language.target'), v.value]),</code></li>
  <li><code>setValues: (v) =&gt; [...getValues('language.target'), v.value],</code>
  <br/><br/>
  also I have no idea how to validate the length of array.
  <br/>If language.target.length is greater then 3,<br/>
  I want to make it stop to set value.<br/>
  If there's any good idea, please share with me! Thanks.</li>
  </ul>