view transitions dont work on common layout parts of a page during transition

function SidebarLayout({ children }: { children: React.ReactNode }) {
  const pathname = useLocation().pathname;
  return (
    <SidebarProvider>
      <AppSidebar path={pathname} />
      {children}
    </SidebarProvider>
  );
}

export default SidebarLayout;

function SidebarLayout({ children }: { children: React.ReactNode }) {
  const pathname = useLocation().pathname;
  return (
    <SidebarProvider>
      <AppSidebar path={pathname} />
      {children}
    </SidebarProvider>
  );
}

export default SidebarLayout;