Atlassian Forge Form with createableselect does not show new element

Question

I implement a form and I use the atlaskit. The form is implement follow:

function App() {
const [selection, setSelection] = useState({
    domain: undefined,
    boundedContext: undefined,
    aggregate: undefined,
    event: undefined
})
const [extensionData, setExtensionData] = useState(null);
const [isFetched, setIsFetched] = useState(false);
const [error, setError] = useState(null);

const [boundedContexts, setBoundedContexts] = useState([]);
const [aggregates, setAggregates] = useState([]);
const [events, setEvents] = useState([]);


useEffect(() => {
    view.getContext().then(({extension}) => {
        setExtensionData(extension);
        setSelection({
            domain: extension.project.id,
            boundedContext: undefined,
            aggregate: undefined,
            event: undefined,
        });
        loadBoundedContexts(extension.project.id);
    });
}, []);

const loadBoundedContexts = (domain) => {
    if (!isFetched) {
        setIsFetched(true);
        invoke('get-bounded-context', {
            domain: domain
        }).then((request) => {
            setBoundedContexts(request);
        });
    }
}

const formValueSubmit = useCallback(async (value) => {
    try {
        return await view.submit(value);
    } catch (e) {
        setError("Couldn't save the custom field");
    }
}, [view]);

const onSubmit = useCallback(async (formData) => {
    // TODO: filedVlaue
    const result = {
        boundedContext: {
            id: formData.boundedContext
        }
    }

    await formValueSubmit(formData.fieldValue);
}, [formValueSubmit]);

const handleOnBlur = useCallback(async (e, dirty) => {
    e.preventDefault();
    if (dirty) {
        await formValueSubmit(e.target.value);
    }
}, [formValueSubmit]);

const isIssueView = extensionData?.renderContext && extensionData.renderContext === 'issue-view';

if (!extensionData) {
    return <>{'Loading...'}</>;
}


const handleBoundedContextChanged = id => {
    console.log(`BC: ${id}`);
    setSelection({
        domain: selection.domain,
        boundedContext: id,
        aggregate: undefined,
        event: undefined,
    });
    setAggregates([]);
    setEvents([]);
    invoke('get-aggregates', {
        domain: selection.domain,
        boundedContext: selection.boundedContext,
    }).then(setAggregates);
};


// Changed Events

const handleAggregateChanged = id => {
    console.log(`A: ${id}`);
    setSelection({
        domain: selection.domain,
        boundedContext: selection.boundedContext,
        aggregate: id,
        event: undefined,
    });
    setEvents([]);
    invoke('get-events', {
        domain: selection.domain,
        boundedContext: selection.boundedContext,
        aggregate: id
    }).then(setEvents);
};

const handleEventChanged = id => {
    setSelection({
        domain: selection.domain,
        boundedContext: selection.boundedContext,
        aggregate: selection.aggregate,
        event: id,
    });
};

const handleCreateBoundedContextOption = name => {
    const id = boundedContexts.length;
    boundedContexts.push({label: name, value: "new-entry-" + id});
    setBoundedContexts(boundedContexts);
    setSelection({
        domain: selection.domain,
        boundedContext: "new-entry-" + id,
        aggregate: undefined,
        event: undefined,
    });
};

const handleAggregateCreateOption = name => {
    const id = aggregates.length;
    setAggregates([...aggregates, {label: name, value: "new-entry-" + id}]);
    setSelection({
        domain: selection.domain,
        boundedContext: selection.boundedContext,
        aggregate: "new-entry-" + id,
        event: undefined,
    });
};

const handleEventCreateOption = name => {
    const id = events.length;
    events.push({label: name, value: "new-entry-" + id});
    setEvents(events);
    setSelection({
        domain: selection.domain,
        boundedContext: selection.boundedContext,
        aggregate: selection.aggregate,
        event: "new-entry-" + id,
    });
};



return (
    <Content isIssueView={isIssueView}>
        <Form onSubmit={onSubmit}>
            {({formProps, dirty, submitting}) => {
                return (
                    <form {...formProps}>
                        <FormHeader title="Impact"/>
                        <FormSection>
                            {error && <SectionMessage appearance="error">{error}</SectionMessage>}
                            <Field name="boundedContext" label="Bounded Context">
                                {({fieldProps}) => {
                                    console.log("link")
                                    return <Fragment>
                                        <CreatableSelect
                                            inputId="bounded-context-select"
                                            onChange={target => handleBoundedContextChanged(target.value)}
                                            onCreateOption={handleCreateBoundedContextOption}
                                            options={boundedContexts}
                                            placeholder="Create Or Select ..."
                                            value={fieldProps.value}
                                        />
                                        <HelperMessage>
                                            Please select or create a new bounded context.
                                        </HelperMessage>
                                    </Fragment>;
                                }
                                }
                            </Field>
                            <Field name="aggregate" label="Aggregate">
                                {({fieldProps, error}) => {
                                    const value = selection.aggregate ? selection.aggregate : fieldProps.value;
                                    console.log(JSON.stringify(fieldProps, null, 2));
                                    return <Fragment>
                                        <CreatableSelect
                                            inputId="aggregate-select"
                                            onChange={target => handleAggregateChanged(target.value)}
                                            onCreateOption={handleAggregateCreateOption}
                                            options={aggregates}
                                            isDisabled={aggregates === undefined || aggregates.length <= 0}
                                            required={false}
                                            {...fieldProps}
                                            value={fieldProps.value}
                                            // value={selection.aggregate}
                                            placeholder="Create Or Select ..."
                                        />
                                        <HelperMessage>
                                            Please select or create an aggregate in the pre selected bounded
                                            context.
                                        </HelperMessage>
                                        {error && <ErrorMessage>{error}</ErrorMessage>}
                                    </Fragment>;
                                }}
                            </Field>
                            <Field name="fieldValue" label="Event / Command" defaultValue={null}>
                                {({fieldProps, error}) =>
                                    <Fragment>
                                        <CreatableSelect
                                            inputId="event-select"
                                            onChange={target => handleEventChanged(target.value)}
                                            onCreateOption={handleEventCreateOption}
                                            options={events}
                                            isDisabled={events === undefined || events.length <= 0}
                                            required={false}
                                            value={events === undefined || events.length <= 0 ? "" : fieldProps.value}
                                            placeholder="Create Or Select ..."
                                        />
                                        <HelperMessage>
                                            Please select or create the event / command of the pre selected
                                            aggregate.
                                        </HelperMessage>
                                    </Fragment>}
                            </Field>
                        </FormSection>
                        <FormFooter>
                            <ButtonGroup>
                                <Button appearance="subtle">Cancel</Button>
                                <LoadingButton
                                    type="submit"
                                    appearance="primary"
                                    isLoading={submitting}
                                >
                                    Add
                                </LoadingButton>
                            </ButtonGroup>
                        </FormFooter>
                    </form>
                );
            }}
        </Form>
    </Content>
);
}

export default App;

When I create a new Element in Field Aggregate, than the element will be add but the new element will not be selected. Only If I select the new element again, than the element will be shown. At first I thought, I just have to add add the code:

inputId="aggregate-select"
                                            onChange={target => handleAggregateChanged(target.value)}
                                            onCreateOption={handleAggregateCreateOption}
                                            options={aggregates}
                                            isDisabled={aggregates === undefined || aggregates.length <= 0}
                                            required={false}
                                            {...fieldProps}
                                            value={selection.aggregate} // <-- Does not work!!
                                            placeholder="Create Or Select ..."
                                        />

But than, nothing is selected, although the "selection.aggregate" is not null! Do you know, why the new element will not be shown after creation?