react-router-dom apply header to all routes

I am implementing react-router-dom to handle routing. The routing works for the most part however my Header component is not visible when the user visits AccountHome

My router is very simple:

const router = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
  },
  { path: "/account", element: <AccountHome /> },
]);

The header is found in the AppLayout file:

export const AppLayout = () => {
  const {
    isAuthenticated,
  } = useContext(AppContext);
  return (
    <div className="App">
      <Header />
      {isAuthenticated ? <HomePage /> : <LandingPage />}
      <Outlet />
    </div>
  );
};

I want the header to be visible on all pages. I feel like my implementation is close but I am misunderstanding how the Outlet works.