title: React-Phone-Number-Input + React-Hook-Form: How to get current country code in controller validation?
body: <p>I'm using <a href="https://gitlab.com/catamphetamine/react-phone-number-input" rel="nofollow noreferrer">react-phone-number-input</a> library. The phone number input is not required but if the number is present I wish it could be validated before the form is sent.</p>
  <p>If the <code>cellphone</code> field is pristine / left untouched when form is submitted then <code>isValid</code> accepts <code>undefined</code> (valid state).</p>
  <p>If country code is changed right away (without actually inputting the number) <code>isValid</code> accepts the selected country's calling code (e.g. <strong>+46</strong> for Sweden). This is still a perfectly valid case.</p>
  <p>When accessed in the <code>isValid</code> function the <code>phoneCountryCode</code> always holds the previous selected value. So there's always a disparity between the validated phone number and the current country code. I'm not sure if the problem is library-specific, maybe it's my mistake. How do I get rid of the mentioned disparity?</p>
  <p>I made a <a href="https://codesandbox.io/s/trusting-leaf-2svlfu?file=/src/App.js" rel="nofollow noreferrer">reproduction on CodeSandbox</a>.</p>
  <pre><code>import PhoneInput, {
    parsePhoneNumber,
    getCountryCallingCode
  } from &quot;react-phone-number-input&quot;;
  
  const [phoneCountryCode, phoneCountryCodeSetter] = useState('DE');
  
  &lt;Controller 
    name=&quot;cellphone&quot;
    rules={{
      validate: {
        isValid: value =&gt; {
          if(value) {
            const callingCode = getCountryCallingCode(phoneCountryCode); 
            if(! new RegExp(`^\\+${callingCode}$`).test(value)) {
              // The parsePhoneNumber utility returns null 
              // if provided with only the calling code
              return !!parsePhoneNumber(value);
            }
          }
          return true;
        }
      }
    }}
    control={control}
    render={({ field }) =&gt; (
      &lt;PhoneInput 
        {...field}
        onCountryChange={(v) =&gt; phoneCountryCodeSetter(v)}
        limitMaxLength={true}
        international={true}
        defaultCountry=&quot;DE&quot;
      /&gt;
    )}
  /&gt;
  </code></pre>