Реагируйте значения Dynami c для выпадающего меню Select semanti c UI

Question

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

Теперь я могу заполнить обычный элемент выбора, используя следующий код

 const personList = persons && persons.map((item, i) => {
            return (
                <option key={item.id} value={item.FullName}>{item.FullName}</option>
            )
        })
  <select onChange={this.selectPerson}>
                                {personList}
                            </select>

Но когда мне нужно заполнить, используя форму, этого не происходит, я не уверен, как это сделать для этой динами c значения здесь - это личные значения, которые меня интересуют для выпадающего списка

SelectInput.jsx

import React from 'react'
import { Form, Select, Label } from 'semantic-ui-react';

const SelectInput = ({
    input,
    placeholder,
    type,
    multiple,
    options,
    meta: { touched, error }
}) => {
    return (
        <Form.Field error={touched && !!error}>
            <Select
                value={input.value || null}
                onChange={(error, data) => input.onChange(data.value)}
                placeholder={placeholder}
                options={options}
                multiple={multiple}
            />
            {touched && error && <Label basic color='red'>{error}</Label>}
        </Form.Field>
    )
}

export default SelectInput

Вот моя форма EarningTypeForm.jsx

    import React, { Component } from 'react'
    import { Segment, Form, Button, Grid, Header } from 'semantic-ui-react';
    import { connect } from 'react-redux';
    import { reduxForm, Field } from 'redux-form';
    import { composeValidators, combineValidators, isRequired, hasLengthBetween } from 'revalidate';
    import { createEarningType, updateEarningType, deleteEarningType } from '../earningtypeActions';
    import TextInput from '../../../app/form/TextInput';
    import SelectInput from '../../../app/form/SelectInput';
    import { firestoreConnect } from 'react-redux-firebase';

    import { compose } from 'redux';
    const PersonsArray = [
        { key: '1', text: 'Harry', value: 'Harry' },
        { key: '2', text: 'John', value: 'John' },
        { key: '3', text: 'Jane', value: 'Jane' },

    ];


    const actions = { createEarningType, updateEarningType, deleteEarningType };

    const mapState = (state, ownProps) => {
        const earningTypeID = ownProps.match.params.id;
        let earningType = {};


        if (state.firestore.ordered.earningTypes && state.firestore.ordered.earningTypes.length > 0) {
            earningType = state.firestore.ordered.earningTypes.filter(earningType => earningType.id === earningTypeID)[0] || {};
        }

        return {
            initialValues: earningType,
            earningType,
            auth: state.firebase.auth,
            persons: state.firestore.ordered.persons,

        }

    }

    const validate = combineValidators({
        EarningTypeName: composeValidators(
            isRequired({ message: 'The FullName is needed' }),
            hasLengthBetween(1, 50)({ message: 'Earning Type must be between 1 to 50 char' })

        )()

    })


    class EarningTypeForm extends Component {

        async componentDidMount() {
            const { firestore, match } = this.props;
            await firestore.setListener(`earningTypes/${match.params.id}`);
        }

        async componentWillUnmount() {
            const { firestore, match } = this.props;
            await firestore.unsetListener(`earningTypes/${match.params.id}`);
        }

        onFormSubmit = async values => {
            try {
                if (this.props.initialValues.id) {
                    this.props.updateEarningType(values);
                    this.props.history.push(`/earningtype/${this.props.initialValues.id}`)
                }
                else {
                    // values.BirthDate = new Date(values.BirthDate)
                    let createdEarningType = await this.props.createEarningType(values);
                    this.props.history.push(`/earningtype/${createdEarningType.id}`)
                }
            }
            catch (error) {
                console.log(error);
            }
        }

        render() {
            const { history, initialValues, invalid, submitting, pristine, persons } = this.props;
            const personList = persons && persons.map((item, i) => {
                return (
                    <option key={item.id} value={item.FullName}>{item.FullName}</option>
                )
            })
            // const arr = Object.values(persons);
            // console.log(arr)
            return (
                <Grid>
                    <Grid.Column width={10}>
                        <Segment>
                            <Header sub color='teal' content='Earning Types Details' />
                            <Form onSubmit={this.props.handleSubmit(this.onFormSubmit)} autoComplete='off'>

                                <Field name='EarningType' component={TextInput} placeholder="Earning Types" />


                                <Header sub color='teal' content='Person Type' />

                                <Field name='PersoName' component={SelectInput} options={PersonsArray} placeholder="Select Person name" />
                                <select onChange={this.selectPerson}>
                                    {personList}
                                </select>                           


<Button disabled={invalid || submitting || pristine} positive type="submit">
                                    Submit
                                </Button>
                                <Button type="button" onClick={initialValues.id
                                    ? () => history.push(`/earningtype/${initialValues.id}`)
                                    : () => history.push('/earningtypes')

                                }>Cancel</Button>
                            </Form>
                        </Segment >
                    </Grid.Column>
                </Grid >

            )
        }
    }


    // export default withFirestore(connect(mapState, actions)(
    //     reduxForm({form: 'EarningTypeForm', validate, enableReinitialize: true })(EarningTypeForm)));


    export default compose(connect(mapState, actions),
        firestoreConnect((props) => {
            if (!props.auth.uid) return []
            return [
                {
                    collection: 'persons',
                    where: [
                        ['createdUID', '==', props.auth.uid]
                    ]

                }
            ]
        }), reduxForm({ form: 'EarningTypeForm', validate, enableReinitialize: true }))(EarningTypeForm);


  [1]: https://i.stack.imgur.com/U7C9J.png