Как сделать меню открытым при открытии текущего подменю только с помощью antd и reactjs?

Question

Я использовал открытое текущее подменю antd , поэтому у меня есть меню Team, в котором есть SubMenu, алфавитный символ c, в котором есть имена врачей и каждое имя Врачи имеют подменю, как это:

Мой код codeSandbox: https://codesandbox.io/s/exciting-wescoff-eqot3

import React, { Component } from "react";
import { Route, Switch, HashRouter } from "react-router-dom";
import { Layout, Menu, Button as ButtonA } from "antd";
import { Link } from "react-router-dom";
import "antd/dist/antd.css";
// Pour le layout
const { Header, Content, Footer, Sider } = Layout;
// SubMenu de Menu
const { SubMenu } = Menu;

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      praticiens: [
        { id: 1, identifiant_user: "125884", nom_user: "Anna" },
        { id: 2, identifiant_user: "987456", nom_user: "Daniel" },
        { id: 3, identifiant_user: "1478889", nom_user: "Oth" }
      ],
      rootSubmenuKeys: [],
      openKeys: ["A", "D", "I", "O"]
    };
  }
  onOpenChange = openKeys => {
    const group = this.state.praticiens
      .sort((a, b) => a.nom_user.localeCompare(b.nom_user))
      .reduce((r, e) => {
        const key = e.nom_user[0];
        if (!r[key]) r[key] = [];
        r[key].push(e);
        return r;
      }, {});
    const latestOpenKey = openKeys.find(
      key => this.state.openKeys.indexOf(key) === -1
    );
    Object.entries(group).map(([key, value], i) => {
      this.state.rootSubmenuKeys.push(key);
      this.setState({ rootSubmenuKeys: this.state.rootSubmenuKeys }, () => {
        if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
          this.setState({ openKeys });
        } else {
          this.setState({
            openKeys: latestOpenKey ? [latestOpenKey] : []
          });
        }
      });
    });
  };
  render() {
    const group = this.state.praticiens
      .sort((a, b) => a.nom_user.localeCompare(b.nom_user))
      .reduce((r, e) => {
        const key = e.nom_user[0];
        if (!r[key]) r[key] = [];
        r[key].push(e);
        return r;
      }, {});

    return (
      <HashRouter>
        <Layout>
          <Sider
            style={{ backgroundColor: "#f5f6f8" }}
            breakpoint="lg"
            width={300}
            collapsedWidth="0"
          >
            <div style={{ borderBottom: "1px solid rgb(210, 210, 210)" }}>
              Log
            </div>
            <Menu
              mode="inline"
              openKeys={this.state.openKeys}
              onOpenChange={this.onOpenChange}
              defaultOpenKeys={["A"]}
            >
              <SubMenu key="sub1" title={"Team"}>
                {Object.entries(group).map(([key, value], i) => {
                  return (
                    <SubMenu key={key} title={key} children={[0]}>
                      {value.map((item, j) => (
                        <SubMenu key={item.id_user} title={item.nom_user}>
                          <Menu.Item>
                            <Link to="/">Gestion des plannings</Link>
                          </Menu.Item>
                          <Menu.Item>
                            <Link
                              to={
                                `/gestiondisponibilite/identifiant_user=` +
                                item.identifiant_user
                              }
                            >
                              Disponibilité graphique
                            </Link>
                          </Menu.Item>
                          <Menu.Item>
                            <Link
                              to={
                                `/gestionActivite/identifiant_user=` +
                                item.identifiant_user
                              }
                            >
                              Gestion des activités
                            </Link>
                          </Menu.Item>
                        </SubMenu>
                      ))}
                    </SubMenu>
                  );
                })}
              </SubMenu>
              <SubMenu key="suub" title={"Team1"}>
                <Menu.Item>
                  <Link to="/">Gestion des consignes</Link>
                </Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout>
            <Header
              className="site-layout-sub-header-background"
              style={{ padding: 0 }}
            />
            <Content style={{ margin: "24px 16px 0" }}>
              <div
                className="site-layout-background"
                style={{ padding: 24, minHeight: 360 }}
              >
                content
              </div>
            </Content>
          </Layout>
        </Layout>
      </HashRouter>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Моя идея заключается в том, когда я нажимаю, например, когда подменю A активно, и я щелкаю подменю D, подменю A будет свернуто, а команда меню будет свернута при каждом щелчке в любом подменю.

Я хочу, когда я нажимаю на подменю, например A, текущее подменю будет свернуто, и меню Командный отдых открыт, он опирается на ту же ситуацию.

Как это исправить?