Getting reference values to show up in select component in UI Builder

[yundlu316]

I'm pretty new to UI Builder and Workspaces and managed to get a modal to pop up through a list declarative action click:

Inside the modal, we have a select component and we want to populate the dropdown with values from our custom table.

We created a data resource that looks up records in our table and we are returning 2 fields, prb_group_name and sys_id:

We then created a client script with the following script:

/**
 * @Param {params} params
 * @Param {api} params.api
 * @Param {any} params.event
 * @Param {any} params.imports
 * @Param {ApiHelpers} params.helpers
 */
function handler({
    api,
    event,
    helpers,
    imports
}) {
    const prbChoices = api.data.look_up_prb_group.results || [];
    const formattedData = prbChoices.map(item => ({
        id: item.sys_id.value || item.sys_id.uniqueValue,
        label: item.prb_group_name.displayValue
    }));
    api.setState('dropdownOptions', formattedData);
}

and created  a Client state parameter, which we're not sure is correct...:

Lastly, in our select component, under Configure > List items on the right panel, we tried to bind the client states to the list items:

After all this, the dropdown still remains empty.  Can someone direct us on what we're missing or doing wrong?

Also, if there are any tips on how to configure the submit button click so that selected items from our list get populated with the chosen PRB group, that would be amazing.  Thanks!