Top navigation outlet: how to hide a single element on v6?

[binarykitchen]

Read all the documents and examples. Still stuck.

I have a root layout. A header with a logo and a slogan. I want to hide the slogan for all pages except the root index page:

const router = createBrowserRouter([
  {
    element: <Layout /> // <--- this has the Header with the Logo and Slogan
    children: [
      {
        index: true,
        path: "/",
        element: <Home />, // <-- This shall display them both, the Logo and the Slogan
      },
      {
        path: "/faq",
        element: <FAQ />, // <-- But this not, only the logo
      },
      {
        path: "*",
        element: <NotFound />,
      },
    ],
  },
]);

That React Layout component is:

import { Outlet } from "react-router-dom";

import Footer from "./Footer";
import Header from "./Header";

const Layout = () => {
  return (
    <>
      <Header />
      <Outlet />
      <Footer />
    </>
  );
};

export default Layout;

And the Header is:

const Header = () => {
  const title = ...
  const slogan = ...

  // TODO only show slogan on home page

  return (
    <header>
      <h1>
        <a href="/" tabIndex={-1}>
          {title}
        </a>
      </h1>
      <p id="slogan"> // <-- this, how can I hide this for all routes except the index one?
        {slogan}
      </p>
    </header>
  );
};

export default Header;

Thanks for any advice/inputs