title: How to use react-phone-number-input with Formik's Field component
body: <p>I'm using Formik and trying to use this package, but Formik can't see the value of the input and thus doesn't validate or submit the form.</p>
  
  <p>Here's the PhonInputField component that I'm using ...</p>
  
  <pre><code>import PhoneInput from "react-phone-number-input";
  
  const PhoneInputField = ({
      field,
      form
  }) =&gt; {
      return (
          &lt;div className="input-field"&gt;
              &lt;PhoneInput
                  placeholder="Enter phone number"
                  name={field.name}
                  value={field.value}
                  onChange={field.onChange}
                  onBlur={field.onBlur}
              /&gt;
          &lt;/div&gt;
      );
  };
  
  export default PhoneInputField;
  </code></pre>
  
  <p>And here's how I'm using it in Formik ...</p>
  
  <pre><code>&lt;Formik
      initialValues={initialValues}
      validationSchema={signInSchema}
      onSubmit={handleFormSubmit}
  &gt;
      {({
          isValid,
          isSubmitting,
          handleChange,
          handleBlur
      }) =&gt; (
          &lt;Form&gt;
  
  
                  &lt;Field
                      type="tel"
                      name="phone_number"
                      component={PhoneInputField}
                  /&gt;
  
              &lt;div className="cta"&gt;
                  &lt;button
                      type="submit"
                      disabled={!isValid || isSubmitting}
                      className="btn btn-primary big"
                  &gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/Form&gt;
      )}
  &lt;/Formik&gt;
  </code></pre>
  
  <p>What am I doing wrong here?</p>
  
  <p>=======================================================</p>
  
  <p>I tried to ask this question on the Github repo page for this project but with no luck.</p>
  
  <p>I also tried to do it like this ...</p>
  
  <pre><code>&lt;PhoneInput
          placeholder="Enter phone number"
          name={field.name}
          value={field.value}
          onChange={value =&gt; field.onChange({ value })}
          onBlur={value =&gt; field.onBlur({ value })}
  /&gt;
  </code></pre>
  
  <p>But still, Formik can't see the field value.</p>