Nested menu / menu bersarang reactjs

Saya Mempunyai Kode Seperti Berikut

  toggle = () => {
    this.setState({
      toggle : !this.state.toggle
    })
  }

  list = () => {
    this.setState({
      list: !this.state.list
    })
  }

          <ul class="menu-child">
            <li class="menu-childs">
              <a href="#home">Home</a>
            </li>
            <li class="menu-childs" onClick={this.list}>
              <a href="#home">User</a>
              <ul class={"tree-menu" + (this.state.list ? 'tree-show' : '' )}>
                <li class="tree-menus">
                  <a href="#member">Member</a>
                </li>
              </ul>
            </li>
            <li class="menu-childs" onClick={this.list}>
              <a href="#home">Components</a>
              <ul class={"tree-menu" + (this.state.list ? 'tree-show' : '' )}>
                <li class="tree-menus">
                  <a href="#button">Button</a>
                </li>
              </ul>
            </li>
          </ul>

pada saat saya klik satu menu bersarang . menu bersarang lain ikut juga muncul