Вывод компонента при нажатии на кнопку в боковом меню в React

Я хотела сделать боковое меню, в котором при нажатии на каждую кнопку открывался бы свой компонент. Для этого взяла готовый шаблон https://www.creative-tim.com/product/light-bootstrap-dashboard-react, в отдельном проекте он работает хорошо, но при попытке добавить это в свой проект (реакт 18 версии) возникают ошибки из-за разных версий. В итоге мне удалось убрать все ошибки и осталась одна проблема с роутингом: не могу понять или найти в интернете как это сделать в новой версии реакта. На старой версии переход по компонентам осуществлялся на этой строчке: <Route path="/admin" render={(props) => <AdminLayout {...props} />} />. Но при запуске проекта на 18 версии при переходе на /admin просто белый экран. Удалось сделать чтобы /admin открывалось корректно таким образом: <Route path="/admin" element={<AdminLayout />} />, но при нажатии на кнопки в боковом меню не происходит открытие компонентов, то есть посредине просто белый экран. При этом отдельно на странице эти компоненты открываются. Вопрос в том, как переписать эту строчку, чтобы компоненты выводились на страницу.

Вот как открывается страница сейчас (красным выделено где должны выводиться компоненты, например dashboard):

А вот как должно открываться (если запускать отдельно с установленной нужной версией):

Как я думаю проблема в этой одной строке, о которой ранее шла речь. Ниже предоставляю минимальный код.

index.js:

import React from "react";
import { createRoot } from 'react-dom/client';
import App from "./App";
import Modal from "react-modal";

Modal.setAppElement("#root");

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App/>);

App.js:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
...
import AdminLayout from "layouts/Admin.js";

export default function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/admin" element={<AdminLayout />} />
          {/* Рабочий вариант на старой версии */}
          {/* <Route path="/admin" render={(props) => <AdminLayout {...props} />} /> */}
        </Routes>
      </Router>
    </>
  );
}

Admin.js:

import React, { Component } from "react";
import { useLocation, Route, Routes } from "react-router-dom";

import AdminNavbar from "components/Navbars/AdminNavbar";
import Footer from "components/Footer/Footer";
import Sidebar from "components/Sidebar/Sidebar";
import FixedPlugin from "components/FixedPlugin/FixedPlugin.js";

import routes from "routes.js";

import sidebarImage from "assets/img/sidebar-3.jpg";

function Admin() {
  const [image, setImage] = React.useState(sidebarImage);
  const [color, setColor] = React.useState("black");
  const [hasImage, setHasImage] = React.useState(true);
  const location = useLocation();
  const mainPanel = React.useRef(null);
  
  const getRoutes = (routes) => {
    return routes.map((prop, key) => {
      if (prop.layout === "/admin") {
        return (
          <Route
            path={prop.layout + prop.path}
            render={(props) => <prop.component {...props} />}
            key={key}
          />
        );
      } else {
        return null;
      }
    });
  };

  React.useEffect(() => {
    document.documentElement.scrollTop = 0;
    document.scrollingElement.scrollTop = 0;
    mainPanel.current.scrollTop = 0;
    if (
      window.innerWidth < 993 &&
      document.documentElement.className.indexOf("nav-open") !== -1
    ) {
      document.documentElement.classList.toggle("nav-open");
      var element = document.getElementById("bodyClick");
      element.parentNode.removeChild(element);
    }
  }, [location]);

  return (
    <>
      <div className="wrapper">
        <Sidebar color={color} image={hasImage ? image : ""} routes={routes} />  
        <div className="main-panel" ref={mainPanel}>
          <AdminNavbar />
          <div className="content">
            <Routes>{getRoutes(routes)}</Routes>
          </div>
          <Footer />
        </div>
      </div>
      <FixedPlugin
        hasImage={hasImage}
        setHasImage={() => setHasImage(!hasImage)}
        color={color}
        setColor={(color) => setColor(color)}
        image={image}
        setImage={(image) => setImage(image)}
      />
    </>
  );
}

export default Admin;