title: React-Hook-Form Controller ignoring useEffect
body: <p>I have two components, where selectBirthMonth depends on SelectBirthYear. Which is why I use useEffect, to watch the selectedYear change, so that I can change selectedMonth in case it is needed.</p>
  <p><a href="https://codesandbox.io/s/blissful-dawn-723rt?file=/components/Form.js:2516-2817" rel="nofollow noreferrer">code sandbox</a></p>
  <p>So in controller context my components look the following</p>
  <pre><code>&lt;Controller
     control={control}
     name=&quot;selectedBirthYear&quot;
     defaultValue={years[0]}
     render={({ field }) =&gt; (
       &lt;SelectBirthYear
         field={field}
         years={years}
         value={selectedYear}
         defaultValue={selectedYear}
         onChange={useEffect(() =&gt; {setSelectedYear(field.value)})}
      /&gt;
     )}
   /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and  ...</p>
  <pre><code>&lt;Controller
         control={control}
         name=&quot;selectedBirthMonth&quot;
         defaultValue={months[0]}
         render={({ field }) =&gt; (
           &lt;SelectBirthMonth
             field={field}
             startYear={startYear}
             selectedYear={selectedYear}
             months={months}
             value={selectedMonth}
             defaultValue={selectedMonth}
             reducedMonths={reducedMonths}
             onChange={useEffect(() =&gt; setSelectedMonth(field.value))}
          /&gt;
         )}
       /&gt;
  </code></pre>
  <p>SelectBirthMonth totally ignored the following code though:</p>
  <pre><code>  const [selectedMonth, setSelectedMonth] = useState(months[0]);
  
    const watchYearChange = () =&gt; {
      if(Number(selectedYear.name) == startYear){
        setSelectedMonth(reducedMonths[reducedMonths.length - 1]);
      }
    };
  
    useEffect(() =&gt; watchYearChange(), [selectedYear]);
  </code></pre>
  <p>Meaning, no matter, which year is chosen, the month won't react. What do I miss?</p>