따봉버튼 질문합니다!!

let [글제목, 글제목변경] = useState(["남자 코트 추천","강남 우동 맛집","청담동 미용실"]);

let [따봉, 따봉변경] = useState([0, 0, 0]);

 function arrcopy(){
    var arrayCopy = [...글제목];

    arrayCopy.unshift(입력값);
    글제목변경(arrayCopy);
  }

{
        글제목.map(function(a,i){
          return(
            <div className='list' key={i}>
              <h3 onClick={()=>{누른제목변경(i)}}>{글제목[i]} <span onClick={()=>{
                let copy = [...따봉]
                copy[i]++;
                따봉변경(copy)

              }}>
                ★</span>{따봉[i]}</h3>
              <p> 2월 17일 발행</p>
              <hr/>
            </div>
          )
        })      
      }

<div className="publish">
        <input onChange={(e)=>{입력값변경(e.target.value)}} />
        <button onClick={arrcopy}

        >저장</button>
      </div>

이렇게해서 map을 이용한 따봉버튼은 완성은 시켰습니다!

문제는 input 강의에서 input으로 새로운 배열을 만들게 되면 따봉버튼이 상위 3개에만 적용되고

밑으로 밀려난 따봉들은 적용이 안되서 NaN이 떠버리는데 어떻게 해결해야하나요?

----------------------------