How to keep react-pro-sidebar submenus open when routing happened?

Question

I am using react-pro-sidebar. Menu hierarchy works as expected.

When I click all its submenus are shown. In the submenus I have routing. So when I click anyone of the submenus, all the whole menus are getting collapsed. Looks its due to routing. Is it? If yes, How can prevent this?

My COde snippet

 <ProSidebar
    collapsed={collapsed}
    toggled={toggled}
    breakPoint="md"
    onToggle={handleToggleSidebar}
    >
    <SidebarContent>
        <Menu iconShape="circle">
            <SubMenu title={'Submenu 1'} icon={<FaList />}>
                <SubMenu title={`Submenu 1.1`} icon={<FaList />}>
                    <MenuItem icon={<FaList />}>
                        Menuitem 1.1
                        <Link to="/menuitem11" />
                    </MenuItem>
                    <MenuItem icon={<FaList />}>
                        MenuItem 1.2
                        <Link to="//menuitem12" />
                    </MenuItem>
                     <SubMenu title={`Submenu 1.1.1`} icon={<FaList />}>
                        <MenuItem icon={<FaList />}>
                            Menuitem 1.1.1.1
                            <Link to="/menuitem1111" />
                        </MenuItem>
                        <MenuItem icon={<FaList />}>
                            Menuitme 1.1.1.2
                            <Link to="/menuitem1111" />
                        </MenuItem>
                    </SubMenu>
                </SubMenu>
            </SubMenu>
        </Menu>
        <Menu iconShape="circle">
            <SubMenu title={'Submenu 2'} icon={<FaList />}>
               
                <MenuItem icon={<FaList />}>MenuItem211
                <Link to="/menuitme21" /></MenuItem>
                
                    <SubMenu title={`Subment 2.1.1} icon={<FaList />}>
                        <MenuItem icon={<FaList />}>Menuitem3.2.1
                        <Link to="/menuItem31" /></MenuItem>
                        <MenuItem icon={<FaList />}>Menuitem3.2.2
                        <Link to="/menuItme32" /></MenuItem>
                       
                </SubMenu>
                
            </SubMenu>
        </Menu>
     </SidebarContent>
  </ProSidebar>

Answer 1

I may be late but I tried different approaches but the best I could do is solve it manually simply using useState:

const [isSubMenuOpen, setIsSubMenuOpen] = useState(true);

   <SubMenu
      open={isSubMenuOpen}
      onOpenChange={() => setIsSubMenuOpen(true)}