The wrapper for routes

MainLayout.js

const MainLayout = ({ navigate }) => {
  const session = useSession();

  return (
    <StyledMainLayout>
      {!session.loading ? (
        <div>
          <Navigation session={session} navigate={navigate} />
          <StyledContainer isLoggedIn={!!session.data}>
            <Outlet context={session} />
          </StyledContainer>
        </div>
      ) : (
        <Loading />
      )}
      <Footer />
    </StyledMainLayout>
  );
};