如何在子项也在React中处于活动状态时保持顶层菜单处于活动状态？

Question

我正在尝试创建一个简单的菜单，用户可以在其中单击并在React中打开子项。这是我用于菜单的数据：

let data = [
  {
    name: "First",
    slug: "first",
    children: [
      {
        name: "Alpha",
        slug: "alpha",
        children: []
      },
      {
        name: "Beta",
        slug: "beta",
        children: []
      }
    ]
  },
  {
    name: "Second",
    slug: "second",
    children: [
      {
        name: "Gamma",
        slug: "gamma",
        children: []
      },
      {
        name: "Delta",
        slug: "delta",
        children: []
      }
    ]
  },
  {
    name: "Third",
    slug: "third",
    children: []
  }
];

export default data;

这是我编写的ALMOST起作用的代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import data from "./data";

const MenuList = props => {
  let list = props.data.map(item => {
    const handleClick = e => {
      props.setMenu(e.target.getAttribute("data-slug"));
    };
    return (
      <>
        <li data-slug={item.slug} onClick={handleClick}>
          {item.name}
        </li>
        {props.active === item.slug ? (
          <MenuList
            setMenu={props.setMenu}
            active={props.active}
            data={item.children}
          />
        ) : null}
      </>
    );
  });

  return <ul>{list}</ul>;
};

function App() {
  const [menu, setMenu] = useState("first");

  return (
    <div>
      <MenuList setMenu={setMenu} active={menu} data={data} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我现在面临的问题是，如果用户单击一个子项目，并且状态被更新，它将激活该子项目并显示子项目。但是，父项现在不处于活动状态，因此它被关闭，子项以及子项也被关闭。

我曾考虑过给菜单项对象一个“父”键，但意识到如果有人在创建子项之后更改父项，他也必须在所有子项中更改父项，这让我感到有更好的方法来解决这个问题。

请注意，用户可以单击任何一个项目，所有其他打开的项目将立即关闭，当前项目及其父项除外。