Javascript 在ReactionRouterDOM v6中使用菜单的共享布局时出现问题

我试图建立一个应用程序，在不同的页面布局上的侧菜单项将是不同的.我不想硬编码链接，而是试图使其可重复使用.但是，当菜单使用REACT-RUTER-DOM进行包装时，菜单并没有展开.

TestMenuAccordion.tsx:

import { useState } from "react";

const Accordion = ({
  controllerElement,
  contentDescription,
  children,
}: any) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div className="w-full mt-4">
      <div
        aria-expanded={isExpanded}
        aria-controls={contentDescription}
        aria-label={(isExpanded ? "hide " : "show ") + contentDescription}
        onClick={() => setIsExpanded((prevIsExpanded) => !prevIsExpanded)}
      >
        {controllerElement(isExpanded)}
      </div>
      {isExpanded && (
        <div id={contentDescription} className="w-full">
          {children}
        </div>
      )}
    </div>
  );
};

export default Accordion;

TestMenu.tsx

import Accordion from "./TestMenuAccordion";
// import "./SideNav.css";
import { Link } from "react-router-dom";

export function SideNavEx(
  props: any,
  { children }: { children: React.ReactNode },
) {
  return (
    <Accordion
      controllerElement={(isExpanded: any) => (
        <button className={isExpanded ? "selected" : "not-selected"}>
          {props.label} {isExpanded ? "-" : "+"}
        </button>
      )}
      contentDescription="menu items"
    >
      <ul className="sideNav">{children}</ul>
    </Accordion>
  );
}

export function GeneralMenuItems(props: any) {
  return (
    <Link to={props.url}>
      <li>{props.text}</li>
    </Link>
  );
}

PageLayout.tsx

import { Outlet } from "react-router-dom";
import { SideNavEx, GeneralMenuItems } from "./TestMenu";

const PageLayout = () => {
  return (
    <>
      <section className="container pt-5 pb-40 px-4 mx-auto grid md:px-8 md:grid-cols-10 md:text-left">
        <div className="px-4 col-span-10 md:col-span-5 lg:col-span-3">

          <SideNavEx label={"General side Menu "}>
            <GeneralMenuItems url={"/Generalmenu1"} text={"Genetal Item 1"} />
            <GeneralMenuItems url={"/Generalmenu2"} text={"Genetal Item 2"} />
            <GeneralMenuItems url={"/Generalmenu3"} text={"Genetal Item 3"} />
          </SideNavEx>

        </div>
        <div className="px-4 pt-4 col-span-10 md:col-span-5 lg:col-span-7">
          <Outlet />
        </div>
      </section>
    </>
  );
};

export default PageLayout;

我正在使用REACT版本18.2和REACT-Router-DOM版本6.21.