title: React final form doesn't take custom input value
body: <p>I have the following code:</p>
  
  <pre><code>...
        return (
          &lt;FormItem key={name}&gt;
            &lt;Label htmlFor={id}&gt;{camelCaseToTitleCase(fieldKey)}&lt;/Label&gt;
            {
              fieldKey === 'homePhone' 
              ?
                &lt;Field name={`${key}.${fieldKey}.value`} validate={validate(fieldKey)}&gt;
                  {props =&gt; 
                    (
                      &lt;&gt;
                      &lt;PhoneNumberInput
                        disabled={disabled}
                        data-bdd={`customer_details_field_${fieldKey}`}
                        id={id}
                        value={props.input.value}
                        // onChange={(val: string):any =&gt; console.log(val)}
                        {...props}
                      /&gt;
                      &lt;/&gt;
                    )
                  }
                &lt;/Field&gt;
  ...
  </code></pre>
  
  <p>where phoneinput is:</p>
  
  <pre><code>const PhoneNumberInput: React.FC&lt;PhoneNumberInputProps&gt; = (props) =&gt; {
    const {
      disabled,
      id,
      label,
      value
    } = props
  
    const [updatedValue, setUpdatedValue] = useState(value)
    const DEFAULT_COUNTRY_VALUE = 'GB'
  
    const handleONChange = (val: string) =&gt; {
      setUpdatedValue(val)
    }
  
    return (
      &lt;&gt;
        &lt;Label htmlFor={id}&gt;{label}&lt;/Label&gt;
        &lt;PhoneInput
          disabled={disabled}
          id={id}
          defaultCountry={DEFAULT_COUNTRY_VALUE}
          value={updatedValue}
          onChange={(phone: string) =&gt; handleONChange(phone)}
        /&gt;
        value: {updatedValue}
      &lt;/&gt;
    )
  }
  </code></pre>
  
  <p>when I submit the form the value from <code>PhoneNumberInput</code> is still coming from <code>props.input.value</code> and doesn't reflect what's being updated in <code>value: {updatedValue}</code>.</p>
  
  <p>The phoneInput component does display the updated value but the same value is not sent when the from is submitted.</p>
  
  <p><a href="https://i.stack.imgur.com/5yjK6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5yjK6.png" alt="enter image description here"></a></p>
  
  <p>The value starting with +44 is what I would like to send to my BE but it still send what ever was inside <code>props.input.value</code></p>