Set pre selected values in a select box with forge and custom ui

Forge Forge UI Kit and Custom UI
1

Hi,

I’m just starting to learn how to build a Jira plugin based on forge and custom-ui.
I am trying to implement a very basic simple workflow but cannot get it to work.
I want to display some a list of options in a select box and I try to preselect some options when the dialog is getting displayed the first time.

All of my implementation is basically based on these examples:
https://atlassian.design/components/form/examples

For now, I was able to display the form, to save the data when the form was submitted.
I struggle to load the data and display the value in the text field. I use the following code to get the data from the “loadSettings” function, which uses the stoage API get method to load the data. This works fine. The data is also loaded

function SettingsPage() {
    const [fields, setFields] = useState([]);
    
    useEffect(() => {
        invoke('loadSettings')
             .then(data => { setFields({value: 'bar', label: 'foo'}) }) 
    }, []);

    return (
        ...

        <Field
            aria-required={true}
            name="fields"
            label="fields"                            
            defaultValue={ fields }
            isRequired>
        {({ fieldProps: { id, ...rest }, error }) => (
            <Fragment>
                <Select
                    inputId={id}
                    isMulti
                    options={fieldList}
                    isLoading={loading}
                    {...rest}
                />
            </Fragment>
        )}
        </Field>

        ...
    )
}

Unfortunatelly the entry ‘bar’ is not displayed in the selection box. When I modify the useState() default value to:

const [fields, setFields] = useState([{value: 'bar', label: 'foo'}]);

It works fine. Does any one have an idea, why it does not work when I try to set the pre-selected values from the useEffect() Method?

I appreciate your help, thank you in advance.