Estoy tratando de crear una barra lateral con un menú desplegable como este ejemplo en reaccionar js

https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp

pude diseñarlo usando reaccionar, el problema es que cuando hago clic en un li interno, el menú desplegable se cierra, no quiero que se cierre

 this.state = { isOpen: false, } Clickhandler() { this.setState({ isOpen: !this.state.isOpen }); } <li style={styles.listItem} onClick={this.Clickhandler} className={this.state.isOpen ? "admintabs" : ""} > <div> <FontAwesomeIcon icon={faHistory} style={{ marginRight: "1rem" }} /> </div> <div> Internal users</div> <div> {" "} <FontAwesomeIcon icon={faCaretDown} /> </div> </li> {this.state.isOpen ? ( <> <NavLink to="/admin/saler" activeClassName="active3" onClick={this.Clickhandler} > <li style={styles.listItem}> <div> <FontAwesomeIcon icon={faCube} style={{ marginRight: "1rem" }} /> </div> <div> saler</div> </li> </NavLink> <NavLink to="/admin/con" activeClassName="active3" onClick={this.Clickhandler} > <li style={styles.listItem}> <div> <FontAwesomeIcon icon={faBriefcaseMedical} style={{ marginRight: "1rem" }} /> </div> <div> Con</div> </li> </NavLink> </> ) : null}

mi código es demasiado grande, así que lo agregué en el cuadro de códigos y

https://codesandbox.io/s/stupefied-hooks-9qm66s?file=/src/App.js