Форма реакции Mobx добавляет поля по клику в зависимости от условия

У меня есть функция, которая генерирует поля для такой формы:

export const makeFields: Function = (itemData: Object) => {
    return [
        {
        // PROJECT DETAIL SECTION
            name: 'chooseAccount',
            label: 'Choose Account',
            fields: [{
                name: 'account',
                label: 'Choose Trading Account',
                rules: 'required',
                ...(itemData ? { value: itemData.trading_account ? itemData.trading_account.name : null } : null)
            }]
        },
        {
            name: 'projectDetails',
            label: 'Project detail',
            fields: [
                {
                    name: 'projectCode',
                    label: 'Project code',
                    rules: 'required',
                    ...(itemData ? { value: itemData.code } : null)
                },
...

и компонент, который использует эту функцию для полей формы:

...
export default class ProjectForm extends React.Component<*> {

    props: TypeProps;

    getMode = () => this.props.mode

    componentDidMount() {
        const projectDetailsStore: Object = this.props.projectDetailsStore;

        this.getMode() === 'edit'
            ?
            projectDetailsStore.loadProjectDetails(this.props.projectId)
            :
            projectDetailsStore.resetStore();
    }

    @computed get form(): Object {
        const itemData: Object = (typeof this.props.itemData === 'undefined') ? {} : this.props.itemData;
        const fields: Array<*> = makeFields(this.props.projectDetailsStore.details);

        return this.getMode() === 'edit'
            ? projectEdit(fields, itemData)
            : projectCreate(fields);
    }

    render(): React.Element<*> {
        const t: Function = this.props.t;
        const TAmodel: AutoCompleteData = new AutoCompleteData(autoCompleteTradingAccounts);
        const Pmodel: AutoCompleteData = new AutoCompleteData(autoCompleteProject);
        const projectDetailsStore: Object = this.props.projectDetailsStore;

        this.form.add(
            {
                name: 'test'
            }
    )

        console.log(this.form)
        return (
            <PageWrapper>
                {projectDetailsStore.loadingProjectDetails
                    ?
                        <Loader />
                    :
                        <FormWrapper form={this.form}>
                            <form>
                                <FormSection form={this.form} section="chooseAccount">
                                    <InputLabel htmlFor="account">
                                        {t('projectForm: Choose trading account')}
                                    </InputLabel>
                                    <ElectroTextField field={this.form.$('chooseAccount.account')} />
                                    {/* <ElectroAutoComplete
                                        field={this.form.$('chooseAccount.account')}
                                        form={this.form}
                                        props={{
                                            model: TAmodel
                                        }}
                                    /> */}
                                </FormSection>
                                <FormSection form={this.form} section="projectDetails">
                                    <ElectroTextField field={this.form.$('projectDetails.projectCode')} />
                                    <ElectroTextField field={this.form.$('projectDetails.projectName')} />
...

Я хотел бы добавить некоторые поля в форму на основе условия. Я пробовал следующее:

    this.form.add(
        {
            name: 'test'
        }
    )

ошибку не выдает, но ничего не происходит.

Метод add принимает объект согласно документации (https://foxhound87.github.io/mobx-react-form/docs/api-reference/fields-methods.html). В идеале я хотел бы, чтобы событие click запускало метод добавления и добавляло вновь созданное поле.