Nested menu / menu bercabang

class Button extends React.Component {
    state = {
      list: true,
    };

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

  render() {
    return (
          <ul className="menu-child">
            <li class="menu-childs">
              <a href="#home">Home</a>
            </li>
            <li class="menu-childs" onClick={this.list}>
              <a href="#home">Home</a>
              <ul className={"tree-menu" + (this.state.list ? 'tree-show' : '' )}>
                <li><a href="#a">Home2</a></li>
              </ul>
            </li>
        <li class="menu-childs" onClick={this.list}>
            <a href="#home">Home</a>
              <ul className={"tree-menu" + (this.state.list ? 'tree-show' : '' )}>
                <li><a href="#a">Home2</a></li>
              </ul>
            </li>
          </ul>
    );
  }
}

React.render(<Button />, document.getElementById('app'));

<!-
.tree-menu{
  display:none;
}

ketika saya klik Home menu bersarang maka display akan none akan tetapi itu merubah semua menu bersarang lain nya <a href=' https://codepen.io/ep-the-animator/pen/VJyVWW '>Demo</a>