React-router-dom with a component outside of the router

I am trying to use react-router-dom to handle my React app navigation. I am running into some issues using the standard useNavigate function because my Header component is outside the Router.

I am trying to restructure the app to move my header inside the Router but when I do this the header does not appear.

Currently my header is rendered in my index.js file:

    <AppProvider>
      <Header />
      <AppRoutes />
    </AppProvider>

The AppRoutes uses createBrowserRouter:

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import App from "./App";
import { Header } from "./Header";
import { AppLayout } from "./AppLayout";
import { AccountHome } from "./pages/AccountHome/AccountHome";

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

export const AppRoutes = ({ auth }) => {
  return <RouterProvider router={router} />;
};

And AppLayout uses Outlet:

export const AppLayout = () => {
  const {
    isAuthenticated,
    isPricingModalOpen,
    pricingOptions,
    setIsPricingModalOpen,
  } = useContext(AppContext);
  return (
    <>
      <PricingModal
        isPricingModalOpen={isPricingModalOpen}
        pricingOptions={pricingOptions}
        setIsPricingModalOpen={setIsPricingModalOpen}
      />
      {isAuthenticated ? <HomePage /> : <LandingPage />}
      <Outlet />
    </>
  );
};

I tried moving the Header into my AppLayout but then the header doesn’t appear on AccountHome