Как установить defaultValue в DropdownList с редукс-формой при получении асинхронных данных c?

Question

Я использую redux-form с DropdownList из react-widgets. Итак, у меня есть компонент, который начинает получать асинхронные c данные в его componentDidMount и pu sh, чтобы хранить их, откуда я должен их взять и передать моему DropdownList. Я передаю data prop - и это работает - но я не могу передать defaultValue prop, потому что это зависит от асинхронных c данных и по-прежнему undefined, когда моя форма отображается. Как повторно инициализировать форму для установки defaultValue?

component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import { required, email } from 'redux-form-validators';
import {
    actionGetUsersRoles,
    actionGetUsersStatuses,
    actionSendNewUser
} from '../../../actions/adminActions';
import DropdownList from 'react-widgets/lib/DropdownList'
import UiBtn from '../ui-btn/UiBtn';
import FieldError from '../field-error/field-error';
import 'react-widgets/dist/css/react-widgets.css'

class AddUser extends Component {
    componentDidMount() {
        this.props.actionGetUsersRoles()
        this.props.actionGetUsersStatuses()
    }

    render() {
        const { appId, countries, roles, statuses } = this.props;
        const { actionSendNewUser } = this.props;

        const handleSubmit = formData => {
            actionSendNewUser(
                appId,
                formData.name,
                formData.surname,
                formData.email,
                formData.country,
                formData.role,
                formData.status
            )
        }

        return (
            <AddUserForm 
                onSubmit={handleSubmit}
                countries={countries}
                roles={roles}
                statuses={statuses}
            />
        )
    }
}

let FormInput = ({ input, meta, ...custom }) => {
    const hasError = meta.touched && meta.error;

    return (
        <div className="popup-inner-content-field">
            <input 
                {...input}
                type={custom.type}
                placeholder={custom.placeholder} 
            />
            {
                hasError &&
                <FieldError 
                    txt={meta.error}
                />
            }
        </div>
    )
} 

let FormDropableInput = ({ input, meta, ...custom }) => {
    const hasError = meta.touched && meta.error;

    return (
        <div className="popup-inner-content-array-field">
            <div className="drop-input">
                <input 
                    {...input}
                    type={custom.type} 
                    placeholder={custom.placeholder}
                />
                {
                    hasError &&
                    <FieldError 
                        txt={meta.error}
                    />
                }
            </div>
        </div>
    )
}

let FormSelect = ({ input, ...custom }) => {
    // console.log(custom.defaultValue)
    return (
        <div className="popup-inner-content-array-field">
            <DropdownList 
                {...input}
                defaultValue={custom.defaultValue}
                data={custom.data}
            />
        </div>
    )
}

let AddUserForm = props => {
    const { handleSubmit, countries, roles, statuses } = props;

    let parsedRoles = roles.map(item => (item.value))
    let parsedStatuses = statuses.map(item => (item.value))

    return (
        <form onSubmit={handleSubmit}>
            <Field 
                name='email'
                component={FormInput}
                type='email'
                placeholder='E-mail'
                validate={
                    required({ msg: 'e-mail is required' }),
                    email({ msg: 'invalid e-mail' })
                }
            />
            <Field 
                name='name'
                component={FormInput}
                type='text'
                placeholder='Name'
                validate={
                    required({ msg: 'name is required' })
                }
            />
            <Field 
                name='surname'
                component={FormInput}
                type='text'
                placeholder='Surname'
                validate={
                    required({ msg: 'Surname is required' })
                }
            />

            <div className="popup-inner-content-array">
                <Field 
                    name='country'
                    component={FormDropableInput}
                    type='text'
                    placeholder='Choose country'
                    validate={
                        required({ msg: 'country is required' })
                    }
                />
                <Field 
                    name='role'
                    component={FormSelect}
                    defaultValue={parsedRoles[0]}
                    data={parsedRoles}
                />
                <Field 
                    name='status'
                    component={FormSelect}
                    defaultValue={parsedStatuses[0]}
                    data={parsedStatuses}
                />
            </div>
            <UiBtn
                txt='Save'
                small
            />
        </form>
    )
}

AddUserForm = reduxForm({
    form: 'add-user'
})(AddUserForm)

AddUser.propTypes = {
    appId: PropTypes.number.isRequired
}

export default connect(state => ({
    appId: state.user.appId,
    countries: state.admin.countries,
    roles: state.admin.roles,
    statuses: state.admin.statuses,
}), {
    actionGetUsersRoles,
    actionGetUsersStatuses,
    actionSendNewUser
})(AddUser)