как исправить ошибку при нажатии на верхнюю кнопку

Обновлено:

Я предпочитаю делать следующее, управляя openKeys, фактически не изменяя значения внутри него в состоянии, поэтому в методе рендеринга посмотрите комментарии в коде.

  render() {
    const { openKeys, collapsed } = this.state;
    // controllable openedKeys array that depends on collapsed value.
    const openedKeys = !collapsed ? openKeys : [];

    return (
      <div style={{ width: 256 }}>
        <Button
          type="primary"
          onClick={this.toggleCollapsed}
          style={{ marginBottom: 16 }}
        >
          <Icon type={this.state.collapsed ? "menu-unfold" : "menu-fold"} />
        </Button>
        <Menu
          openKeys={openedKeys} //passed the new controllable array here
          onOpenChange={this.onOpenChange}
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={["sub1"]}
          mode="inline"
          theme="dark"
          inlineCollapsed={collapsed}
        >
...... rest of the code

================

Вам нужно очистить массив openKeys из вашего состояния, в нем указано, что подменю sub1 открылось, когда оно есть, поэтому при нажатии кнопки мы должны очистить его, чтобы закрыть открытые подменю.

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
      openKeys: [],
    });
  };

Конечно, добро пожаловать в StackOverflow, это радостная платформа с множеством замечательных разработчиков, которые готовы помочь своим опытом.