하나의 변수에 두개 이상의 상태변화 주는법?

"map : 많은 div들을 반복문으로 줄이고 싶은 충동이 들 때 " 수업을 들으며 다른 기능들도 시도해보다가 궁금증이 생겨 질문 드립니다.
 

let [따봉, 따봉증가] = useState(0);

따봉 이라는 변수가 클릭을 할때마다  초기값 0에서 1씩 증가하는데, 

만약 처음에는 " 따봉" 변수의 초기값  0이 화면에 보이지 않다가 클릭해서 {따봉}이 1이 되는 순간, 즉 {따봉증가} 함수가 작동하는 순간부터  보이게 하는 방법이 뭐가 있을까요?

state를 변경하는 것 말고 다른 방법은 떠오르지 않아서 

let [따봉, 따봉증가] = useState(0, false); 

이런거 안되는거 알면서도  이것저것 시도해봤는데 역시나 안돼서 여쭤봅니당

처음엔 위와 같이 0이 보이지 않는 모습이다가 onClick={()=>{따봉증가(따봉+1)}} 하는 순간

숫자가 나타나게 하고 싶습니다.

  function App() {

    let [a, b] = useState(["가나다", "라마바", "사아자", "차카타"]);
    let [따봉, 따봉증가] = useState(0);
    return (
      <div>
        {a.map(() => {
          <div className="list">
            <h3>{i}</h3>
            <p onClick={() => {따봉증가(따봉 + 1); }   } > 😊{따봉} </p>
            <p>2022년 2월 14일</p>
          </div>;
        })}
      </div>
    );
  }