Using onRenderMenuList property to customize the button's contextual menu appearance, the button menu does not dismiss on click of the item.

[Mohtasim]

I've been trying to customize the menu appearance. By default the menu appears where each item is in a menu row. My goal is to customize the menu where it renders as one row and in the row each ContextualItem appears in each column. My items are always fixed. 5 items. To be exact, 5 icons.
So I used the onRenderMenuList property to set a div element where the div sets the rule/style to render the items as {display: 'flex', flexDirection: 'row'}.
After this, the menu is not dismissing on click of an item.
Any ideas, how I can properly style the items to be rendered in one Row and dismiss the menu onClick of each item.

Thanks :)

const renderIcons = (item: IContextualMenuItem, dismissMenu: (ev?: any, dismissAll?: boolean) => void) => (
    <div 
    style={{display: 'flex', flexDirection: 'column', backgroundImage: src}}
    onClick={() => {dismissMenu();}}
    />
);
const iconList: IContextualMenuItem[] = [
 {key: '1', onRender: renderIcons},
 {key: '2', onRender: renderIcons},
 {key: '3', onRender: renderIcons},
 {key: '4', onRender: renderIcons},
 {key: '5', onRender: renderIcons},
]

const menuProps: IContextualMenuProps = {
    items: iconList,
    shouldFocusOnMount: true,
    onRenderMenuList: (props: IContextualMenuListProps | undefined) => {
          return (
            <div
              style={{ 
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center', 
                flexDirection: 'row', 
                width: '220px', 
                height: '42px',
                }}>
                {props?.items.map((item:any) => item.onRender(item, () => {}))} // how to pass dismissMenu here? 
            </div>
          );
}
...............
...............
button implementation: Button component where menu props is used.
...............