Primereact tree context menu not hiding after an action

[violasims199]

I'm using Primereact's tree along with context menu. After performing an action (a click event on one of the menu items), context menu is not hiding. If I click anywhere on the screen the context menu hides. Here is the code. I'm following the same pattern provided by primereact. Can you help me figure out how to fix this?
TelltheBell Survey
DemoPrimeReact.js

import React, {useContext, useEffect, useRef, useState} from 'react';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.css';
import 'primeflex/primeflex.css';
import {Tree} from 'primereact/tree';
// other imports

const DemoPrimeReact = () => {
// .... other lines skipped
const [selectedNodeKey, setSelectedNodeKey] = useState(null);
const contextMenu = useRef(null);

return (
<>
<DemoContextMenu
contextMenu={contextMenu} setSelectedNodeKey={setSelectedNodeKey}
//... other props
/>
<Tree
value={[withOrWithoutSearchNodes[0]]}
selectionMode="single" selectionKeys={selectedKey} onSelectionChange={handleSelectionChange}
onSelect={onNodeSelect} onUnselect={onNodeUnselect}
expandedKeys={expandedKeys} onToggle={(event) => setExpandedKeys(event.value)}
contextMenuSelectionKey={selectedNodeKey}
onContextMenuSelectionChange={(event) => setSelectedNodeKey(event.value)}
onContextMenu={(event) => contextMenu.current.show(event.originalEvent)}
dragdropScope="catalog-dnd" onDragDrop={(event) => {
handleCatalogDragAndDrop(event, setLoading, setCanPaste, loadChildrenOnExpand,
setSelectedKey, setExpandedKeys, onNodeSelect, setNodes, expandedKeys);
}}
onExpand={loadChildrenOnExpand} className={classes.primeTree} nodeTemplate={nodeTemplate}
/>
</>
);
}

export default DemoPrimeReact;
DemoContextMenu.js

import React, {useState} from 'react';
import {ContextMenu} from "primereact/contextmenu";

const DemoContextMenu = (props) => {

const { contextMenu, setSelectedNodeKey } = props;

const menu = [
{
label: "Create Library",
template: (item, options) => {
return (
<>
{
nodeInfo && (nodeInfo.node.value.entryType === 'M' ||
nodeInfo.node.value.entryType === 'L') ?
<span
style={{padding: '0 0 0 15px'}}
className={options.className}
>
<Button
onClick={(event) => handleCatalogAction(event, 'createLibrary')}
className={classes.button}
>
<CreateLibraryIcon style={{color: '#68de86'}} />
<span className={classes.item}>Create Library</span>
</Button>
</span> : null
}
</>
);
},
}
];

return (
<>
<ContextMenu
model={menu}
ref={contextMenu}
onHide={() => setSelectedNodeKey(null)}
className={classes.contextMenu}
/>
</>
);
}

export default DemoContextMenu