因此，它在侧边栏组件上循环和子菜单，但不是在父菜单下显示子菜单，而是在父菜单的右侧显示子菜单，如下图所示：

下面是我的代码，说明如何将subMenu和Parents项循环到react组件：

return (
    <div className=" my-4 border-gray-100 pb-4">
      {items.map(({ icon: Icon, iconArrow: IconArrow, ...item }, index) => {
        if (item.subMenu) {
          return (
            <div>
              <Link href={item.link}>
                <a
                  onClick={(e) => onMouseClick(e, item.link)}
                  className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto"
                >
                  <Icon className="text-2xl text-white group-hover:text-red" />
                  <h3 className="text-base text-white group-hover:text-red font-semibold  ">
                    {item.label}
                  </h3>
                  {item.subMenu && dropdown ? (
                    <>
                      <IconArrow className="pl-0 text-2xl text-white group-hover:text-red" />
                    </>
                  ) : (
                    <></>
                  )}{" "}
                  {item.subMenu && dropdown ? (
                    <div>
                      {item.subMenu.map((subitem, index) => {
                        return <>makan</>;
                      })}
                    </div>
                  ) : (
                    <></>
                  )}
                </a>
              </Link>
            </div>
          );
        } else {
          return (
            // eslint-disable-next-line react/jsx-key
            <div>
              <Link href={item.link}>
                <a
                  onClick={(e) => onMouseClick(e, item.link)}
                  className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto"
                >
                  <Icon className="text-2xl text-white group-hover:text-red" />
                  <h3 className="text-base text-white group-hover:text-red font-semibold  ">
                    {item.label}
                  </h3>
                </a>
              </Link>
            </div>
          );
        }
      })}
    </div>
  );
};

有人能告诉我我在哪里做错了吗，这里是我在侧边栏中调用侧边栏组件的地方：

return (
    <div className="h-full px-4 pt-8  bg-yellow flex flex-col  peer-focus:left-0 peer:transition ease-out delay-150 duration-200">
      <div className="flex flex-col justify-start item-center mb-4">
        <Image src={Logo_Nabati} width={123} height={75} alt="logo Nabati" />
      </div>
      <Sidebarcomponent items={menuItems} />;
    </div>
  );