Using Select as a controlled component

[angelusmcnally]

I'm migrating a command bar item to a dropdown that triggers a function when the user selects a different option. I know I can create this with either the Select or Dropdown components, and it seems like I should use Select because the dropdown does not contain styling or need multi-select.

I'm running into trouble with the onChange for the Select component and forcing rerenders when the value changes.

Here's the implementation of the component (slightly generalized):

const [commandBarItems, setCommandBarItems] = React.useState([]);
const [selectedItem, setSelectedItem] = React.useState<string>();

const onChange: SelectProps['onChange'] = React.useCallback(
    (_ev: any, data: SelectOnChangeData) => {
        commandBarItems.find(item => data.value === item.key)?.onClick?.();
    },
    [commandBarItems]
);

...

<Select value={selectedItem} size="small" onChange={onChange}>
     {sizeOptions}
</Select>

Each of the sizeOptions within the Select is an <option> that's wrapped around each of the commandBarItems. Each has an associated onClick, which bubbles the change elsewhere and ultimately rerenders the parent of this component, causing selectedItem to change (I can tell that selectedItem is changing as it should be through log statements). However, when the parent component rerenders, the Select is not rerendering and does not reflect the updated value of selectedItem. The only value the Select dropdown will display is the first element of sizeOptions (which is the same as the first element of commandBarItems. When I select other options in the dropdown, the associated onClicks are called as expected and the value of selectedItem changes, even though the Select component doesn't reflect this change.

Is this a supported use for Select as a controlled component, or should I focus my efforts on trying to make Dropdown work for this use case instead?