Prevent custom ToolPanel from collapsing on render - ag-grid

Question

I have a simple custom ToolPanel registered with my AgGrid. It's a functional react component that is updated whenever the selected rows change. Unfortunately, I'm finding that whenever my component needs to re-render (such as when the selection changes) the tool panel collapses?!
This is very annoying - I would like the ToolPanel to remain open across re-renders. Please advise!
Here's more or less what my ToolPanel code looks like:
const Container = styled.div`
margin: 0px auto;
padding: 10px;
`;
export interface MyToolPanelProps {
selected: MyRowData[];
}
export const MyToolPanel = (props: MeToolPanelProps) => {
return (params: IToolPanelParams) => {
return (
<Container>
<AnotherComponentThatProcessesSelectedItems
{...props}
/>
</Container>
);
};
};
Here's how I'm injecting it into AgGrid:
const [selected, setSelected] = useState<MyRowData[]>([]);
...
gridOptions.onSelectionChanged = (e) =>
setSelected(e.api.getSelectedRows());
...
<AgGridReact
gridOptions={gridOptions}
sideBar={{
toolPanels: ["columns", "filters",
{
id: 'myToolPanel',
labelDefault: 'My Tool Panel',
labelKey: 'myToolPanel',
iconKey: 'columns',
toolPanel: MyToolPanel({
selected: selected
}),
}]
}}
/>

Answer 1

After reviewing the documentation on the website closer, I found that I was able to achieve what I wanted by making my functional component use the api to subscribe to the selectionChanged event. https://www.ag-grid.com/react-data-grid/component-tool-panel/
const Container = styled.div`
margin: 0px auto;
padding: 10px;
`;
export const MyToolPanel = (props: IToolPanelParams) => {
const [selected, setSelected] = useState<MyRowData[]>(props.api.getSelectedRows());
const onSelectionChanged = (e: SelectionChangedEvent) => {
setSelected(e.api.getSelectedRows());
}
useEffect(() => {
props.api.addEventListener('selectionChanged', onSelectionChanged);
return () => {
props.api.removeEventListener('selectionChanged', onSelectionChanged);
}
}, [])
return (
<Container>
<AnotherComponentThatProcessesSelectedItems
selected={selected}
/>
</Container>
);
};
Works like a charm now :)