title: How to make React final form 'Field' value change on date picker event?
body: <p>I want to create a date range field, such that on clicking a input field I would open up a date picker component and on selecting a date range. I would want to populate the input field with selected range.</p>
  
  <p>What I done so far:</p>
  
  <p>I created a input field which is wrapped by a <strong>Field</strong> component. To the value of the input I have set it to this.state.DateRange. Which I would change based on the date range selected from the DatePicker component.</p>
  
  <pre><code>   handleSelect({selection}){
      let startDate = format(selection.startDate, 'DD/M/YYYY');
      let endDate = format(selection.endDate, 'DD/M/YYYY');
  
      this.setState({
        selection,
        DateRange: `${startDate} - ${endDate}`
      })
      }
  
      //TextFieldInput is a styled component - styled.input
  
      render(){
  
        return (
        &lt;div&gt;
          &lt;Field name='test'&gt;
  
            {({ input, meta, ...rest }) =&gt; (
              &lt;TextFieldInput
                {...input}
                {...meta}
                value={this.state.DateRange}
              /&gt;
            )}
          &lt;/Field&gt;
              &lt;DateRangePicker
                  ranges={[this.state.selection]}
                  onChange={this.handleSelect}
            months={2}
            minDate={new Date()}
            showMonthAndYearPickers={false}
            showDateDisplay={false}
            staticRanges={[]}
            inputRanges={[]}
            direction='horizontal'
              /&gt;
        &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>What I would want to do:</p>
  
  <p>I am able to set the value of the input field through this method, but I am not able get that value when I press submit. It seems that despite value is been set to the input it isn't passed to form onSubmit(values)</p>