안녕하세요

on이 붙으면 내용이 보이는 탭 메뉴를 구현하고 있습니다

클릭하지 않고도 첫 화면에 0번째 값이 보이도록 하려면 어떻게 코드를 추가하면 좋을까요 ?

도움 주시면 정말 감사하겠습니다 !

//  
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>