따봉개별클릭 관련해서 질문드립니다!

let [zero, setZero] = useState([0,0,0]); 

{
          name.map((a,i)=>{
            return (
             
              <div className="list" key={i}>
                <h3 onClick={()=>{setNum(i)}}>{a} <span onClick={()=>{
                  let best = [...zero];
                  best[i]++;
                  setZero(best)
                }}>👍</span>{zero[i]}</h3>
                <p>2월 18일 발행</p>
                <hr/>
            </div>

            )
 

지금 이렇게 작성해서 개별클릭은 잘돌아가고있는데,

추가했을때도 개별로 찍히게 하고싶은데요!
let [name, setName] = useState(['여자 코트 추천', '강남 우동 맛집','재밌는 코딩시간']); //글제목
let [zero, setZero] = useState([0,0,0]); //따봉
let [num, setNum] = useState(0); // 글제목 인덱스

let [text, setText] = useState(''); // input 추가텍스트
let [modal, setModal] = useState(false); //modal창

function change() {
var newChange = [...name];
newChange.unshift(text);
setName(newChange)
}
 

그럴려면 (글제목)부분에 추가되는 (input 추가텍스트) 여기에 (따봉)을 넣어줘야할까요?!?! 도저히 방향성을 못잡겠습니다 ㅠㅠㅠㅠ