Filtering menu items inside the Fluent UI command bar causes the command bar to re-render and close the menu

Question

I'm trying to add a custom menu with a search box to filter menu items to a command bar. and as soon as I change the menu items the command bar re-renders and ends up closing the menu. Is there to programmatically open a command bar menu?

CommandBar Item:

    {
    ....,
    subMenuProps: {
        onRenderMenuList: (menuListProps, defaultRenderer) => {
            return (
                <div>
                    <SearchBox
                        ariaLabel="Filter actions by text"
                        placeholder="Filter actions"
                        onAbort={onAbort}
                        onChange={onChange}
                        styles={searchBoxStyles}
                    />
                    {defaultRenderer(menuListProps)}
                </div>
            );
        }, 
            items: filteredItems,
    },
}

Calling onChange() changes a filter in the command bar state which causes the whole command bar to re-render.

I have also tried to create a custom menu and pass only the filtered items to the command bar, but didn't achieve anything.