реагирующий виджет DropdownList не отображает выбранную пользователем опцию в редукционной форме

Question

Я использую избыточную форму для создания формы с выпадающим меню и двумя пирамидальными датчиками, значения которых затем используются для выполнения запроса GET с использованием axios, и для обновления таблицы, отображаемой под формой. Я использую DropdownList и DateTimePicker из реагирующих виджетов.

Запрос GET работает, поэтому все значения из формы фиксируются, и данные в таблице обновляются, но я не могу получить раскрывающееся меню для отображения параметра, выбранного пользователем. Выбор даты действительно отображает дату, выбранную пользователем.

Я провел много исследований, в том числе просматривал примеры в документах по редукс-форме, базовые учебники по редукс-форме и много занимался поиском через Google и Stack, и я не нашел ничего, что могло бы помочь. Это первый раз, когда я использовал избыточность и избыточную форму, поэтому я не уверен, что мне не хватает.

Ниже приведен фрагмент кода моего компонента SubmitForm.js.

Спасибо за вашу помощь

import { reduxForm, Field } from 'redux-form';
import Moment from 'moment';
import momentLocalizer from 'react-widgets-moment'
import DropdownList from 'react-widgets/lib/DropdownList';
import DateTimePicker from 'react-widgets/lib/DateTimePicker';
import 'react-widgets/dist/css/react-widgets.css';

Moment.locale('en');
momentLocalizer();

const renderDropdownList = ({ input, data, valueField, textField }) => {
  return <DropdownList {...input}
    data={data}
    valueField={valueField}
    textField={textField}
    onChange={input.onChange} />
}

const renderDateTimePicker = ({ input: { onChange, value }, showTime }) =>
    <DateTimePicker
      onChange={onChange}
      format="DD MMM YYYY"
      time={showTime}
      value={!value ? null : new Date(value)}
      />

class SubmitForm extends Component {

  displayName: 'SubmitForm';

  onSubmit(props) {
    this.props.fetch(props);
  }

  render() {
      const { handleSubmit } = this.props;
      const data = [];
      this.props.availableTypes.map(type => {
        return data.push({ type: type.item_name, value: type.item_name })
        })

      return (
        <form className="form-inline col-md-offset-2" onSubmit={handleSubmit(this.onSubmit.bind(this))}>
            <div className="form-group">
                <label htmlFor='item-type' className='mr-2'> Type:</label>
                <Field className='form-control' id='item-type'
                    name="type"
                    data={data}
                    valueField="valueField"
                    textField="type"
                    component={renderDropdownList}                  
                />

            <div className='verticalLine'></div>

            <div className="form-group">
                <label htmlFor="from" className="mr-2">From:</label>
                <Field
                name="from"
                showTime={false}
                component={renderDateTimePicker}
                />
            </div>

            <div className="form-group">
                <label htmlFor="to" className="mr-2 ml-2">To:</label>
                <Field
                name="to"
                showTime={false}
                component={renderDateTimePicker}
                />
            </div>

            <div className='verticalLine'></div>

            <div className='form-group'>
              <button type="submit" className="btn btn-secondary">Search</button>
              <div className='verticalLine'></div>
            </div>
            </div>
        </form >
      );
  };
};

SubmitForm = reduxForm({form: 'SubmitForm', validate})(SubmitForm);
export default connect(mapStateToProps, mapDispatchToProps)(SubmitForm);