javascript - 日付ピッカーイベントでReact最終フォームの「フィールド」値を変更するにはどうすればよいですか?

Question

入力フィールドをクリックすると日付ピッカー コンポーネントが開き、日付範囲を選択するように、日付範囲フィールドを作成したいと考えています。入力フィールドに選択した範囲を入力したいと思います。

私がこれまでに行ったこと：

Fieldコンポーネントによってラップされる入力フィールドを作成しました。入力の値には、this.state.DateRange に設定しました。DatePicker コンポーネントから選択された日付範囲に基づいて変更します。

   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 (
      <div>
        <Field name='test'>

          {({ input, meta, ...rest }) => (
            <TextFieldInput
              {...input}
              {...meta}
              value={this.state.DateRange}
            />
          )}
        </Field>
            <DateRangePicker
                ranges={[this.state.selection]}
                onChange={this.handleSelect}
          months={2}
          minDate={new Date()}
          showMonthAndYearPickers={false}
          showDateDisplay={false}
          staticRanges={[]}
          inputRanges={[]}
          direction='horizontal'
            />
      </div>
        )
    }

私がやりたいこと：

このメソッドを使用して入力フィールドの値を設定できますが、送信を押してもその値を取得できません。値が入力に設定されているにもかかわらず、フォーム onSubmit(values) に渡されていないようです