좋아요 따로 구현 기능 질문

코드를 구현하였는데 좋아요가 000개로 늘어나있고, 각각 좋아요 버튼을 눌렀을 때 1의 자리, 10의 자리, 100의 자리 순으로 올라갑니다.
코드 답변 부탁드립니다 ㅠ


/*eslint-disable*/
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {
    
    let post = '강남 고기 맛집'
    let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])
    let [따봉, 따봉변경] = useState([0,0,0]);
    let [modal, setModal] = useState(false);

    return (
    <div className="App">
      <div className='nav-black'>
        <h4>React Blog</h4>
      </div>
         <div className='list'>
          <h4>{글제목[0]} <span onClick={() => {따봉변경(따봉 + 1);}}>👍</span>{따봉}</h4>
          <p> 2월 17일 발행</p>
          <button onClick={() => {
            let copy = [...글제목];
            copy[0] = '여자 코트 추천'
            글제목변경(copy)}}>변경</button>
        </div>
        <div className='list'>
          <h4>{글제목[1]}</h4>
          <p> 2월 17일 발행</p>
        </div>
        <div className='list'>
          <h4 onClick={()=>{ setModal(!modal) }}>{글제목[2]}</h4>
          <p> 2월 17일 발행</p>
        </div>

        {
          modal == true ? <Modal/> : null
        }

            <Modal/>

        <button onClick={ () => {
          let copyname = [...글제목];
          copyname.sort();
          글제목변경(copyname)
        }} >가나다순 정렬</button>

        {
          글제목.map(function(a, i){
            return (
              <div className='list' key={i}>
              <h4>{글제목[i]} <span onClick={()=>{ 
              let copy = [...따봉];
              copy[i]++;
              따봉변경(copy)  
              }}>👍</span>{따봉}</h4>
              <p> 2월 17일 발행</p>
            </div>
            )
          })
      }
      
    </div>
  );
}

function Modal() {
  return (
    <div className='modal'>
    <h4>제목</h4>
    <p>날짜</p>
    <p>상세내용</p>
  </div>
  )
}

export default App;