i am trying to create a sidebar with drop down like this example in react js

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

i was able to design it using react the issue is that when i click on a inner li the dropdown closes i dont want it to close

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}

my code is too big so i added in codesand box

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