React Tab Menu Implementing Question!

//  
const [tabIsOn, setTabIsOn] = useState([]);

  const tapIndex = index => {
    setTabIsOn(index);
  }

              <ul className={toggle ? "tab on" : "tab"}>
                <li className={ tabIsOn === 0 ? "on" : ""}
                onClick={() => tapIndex(0)}
                >
                  <a href="#/help">
                    <div className="checkCircle"><i className="fas fa-check"></i></div>All Topics</a>
                </li>
                <li className={ tabIsOn === 1 ? "on" : ""}
                onClick={() => tapIndex(1)}
                >
                  <a href="#/help"><div className="checkCircle"><i className="fas fa-check"></i></div>Orders</a>
                </li>
              </ul>

              <div className={ tabIsOn === 0 ? "tableBox on" : "tableBox" }>

                    <article className="post"
                     onClick={e=>handleClick(e)}
                     >
                        <h2>{help.title}</h2>
                        <div className="con">
                          <p>{help.content}</p>
                        </div>
                        <i className="fas fa-chevron-up up"></i>
                        <i className="fas fa-chevron-down down"></i>
                    </article>
              </div>

             <div className={ tabIsOn === 1 ? "tableBox on" : "tableBox" }>

                    <article className="post"
                     onClick={e=>handleClick(e)}
                     >
                        <h2>{help.title}</h2>
                        <div className="con">
                          <p>{help.content}</p>
                        </div>
                        <i className="fas fa-chevron-up up"></i>
                        <i className="fas fa-chevron-down down"></i>
                    </article>
            </div>