useEffect(() => {
console.log("switching tabs")
console.log(router.pathname)
// Set the active tab based on the current pathname
setActiveTab(router.pathname);
}, [router.pathname]);

in my sidebar component I am tracking route changes like this to highlight my sidebar. however this hook only gets called on page reload not when I change paths using router.push