Как я могу управлять двумя разными макетами, используя useRoutes в реакции

Вот мой код useRoute ниже. Все, что я хочу, это если я перехожу на страницу доходов... она работает нормально, но когда я перехожу на "http://localhost:3000/revenue/send-offer-letter", браузер показывает пустой экран. Как я могу это использовать?

константа MainRoutes = [ { путь: "/", элемент: , дети: [ { путь: "/", элемент: , }, { путь: "/расписание", элемент: , }, ], },

{ путь: "доход", элемент: , дети: [ { путь: "", элемент: , }, { путь: "отправить-предложение-письмо", элемент: , }, ], }, ];

I want nested routing with two different layout screens.

@Drew here is my updated code as your answer 

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

const MainLayout = () => {
  return (
    <Outlet /> // <-- nested routes render content here!
  );
};

const RevenueLayout = () => {
  return (
    <Outlet /> // <-- nested routes render content here!
  );
};

const MainRoutes = [
  {
    path: "/",
    children: [
      {
        element: <MainLayout />,
        children: [
          {
            index: true,
            element: (
              <>
                <h1>Main Layout First Page</h1>
              </>
            ),
          },
          {
            path: "/schedule",
            element: (
              <>
                <h1>Main Layout Second Page</h1>
              </>
            ),
          },
        ],
      },
      {
        path: "/revenue",
        element: <RevenueLayout />,
        children: [
          {
            index: true,
            element: (
              <>
                <h1>Revenue First Page</h1>
              </>
            ),
          },
          {
            path: "send-offer-letter",
            element: (
              <>
                <h1>Revenue Second Page</h1>
              </>
            ),
          },
        ],
      },
    ],
  },
];