I am having an issue where I use a custom made bottom bar to keep track of the navigation and the active pages on all of my pages.

The index.js is stated as below:
const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <AliveScope> <BrowserRouter> <Routes> <Route path="/" element={<KeepAlive><Map /></KeepAlive>} /> <Route path="/map" element={<KeepAlive><Map /></KeepAlive>} /> <Route path="/harta" element={<KeepAlive><Map /></KeepAlive>} /> <Route path="/map/:undemibusu" element={<KeepAlive><Map /></KeepAlive>} /> <Route path="/orare" element={<Orare />} /> <Route path="/orare/:linie" element={<Orar />} /> <Route path="/favorite/:linie" element={<Orar />} /> <Route path="/favorite" element={<Favorite />} /> <Route path="/storeredirect" element={<AppStoreRedirects />} /> <Route path="/stiri" element={<Stiri />} /> <Route path="/setari" element={<Settings />} /> <Route path="/setari/panou-linii" element={<PanouDisplayLinii />} /> <Route path="/onboarding" element={<Onboarding />} /> <Route path='/.well-known/assetlinks.json' element={<FileViewer filePath="../public/assetlinks.json" />} /> <Route path="*" element={<KeepAlive><Map /></KeepAlive>} /> </Routes> </BrowserRouter> </AliveScope> );

The algorithm I use to try to detect the active page is by using location.pathname but it fails to recognize the kept alive components unless I run the same algorithm twice. I also tried to use a state variable to keep track of the active pages but I get the same result.

`const selectedIndex = useMemo(() => {
const path = location.pathname;

    return bottomNavItems.findIndex(item => {
        if (item.page === '/') {
            return ['/','/map','/harta'].some(p => path === p || path.startsWith(p + '/'));
        }
        return path === item.page || path.startsWith(item.page + '/');
    });
}, [location.pathname, bottomNavItems]);

useEffect(() => {
    console.log("Location changed:", location.pathname, "selected index:", selectedIndex);
}, [location, selectedIndex]);

if (keyboardVisible) return null;

return (
    <div className="bottom-bar-fixed">
        <BottomNavigation
            key={location.pathname}
            items={bottomNavItems}
            selected={selectedIndex >= 0 ? selectedIndex : 0}
            onItemClick={(item, index) => {
                if (location.pathname !== item.page) {
                    nav(item.page);
                }
            }}
            disableSelection
            activeBgColor="white"
            activeTextColor="#915FA8"
        />
    </div>
);`

Any advice?