좋아요 버튼 질문

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import { click } from '@testing-library/user-event/dist/click';

function App() {
  let [a, b] = useState(['What is JSX?', 'How use variable in React?', 'How edit element with React?']);
  let navLogo = 'React Blog';
  let [e, f] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);
  let copy = [...a]
  let pp = [...e]
  return (
    <div className="App">
      <div className='black-nav'>
        <p>{navLogo}</p>
        <span onClick={function () { b(copy.sort()) }}>Ranking</span>
      </div>

      {/* <div className='content'>
        <h4>{a[0]}</h4>
        <div className='btn'>
          <span onClick={function () { f(e + 1) }}>👍</span><p className='count'>{e}</p>

        </div>
        <p>2009,01,15</p>
      </div>

      <div className='content'>
        <h4>{a[1]}</h4>
        <div className='btn'>

        </div>
        <p>2009,01,15</p>
      </div>

      <div className='content'>
        <h4 onClick={function () { setModal(!modal) }}>{a[2]}</h4>
        <div className='btn'>

        </div>
        <p>2009,01,15</p>

      </div> */}

      {
       

        a.map(function (a, b) {
          
          console.log(pp)
          return (
            <div className='content' key={b}>
              <h4 onClick={function () { setModal(!modal) }}>{a} <span onClick={function () { f(pp[b] + 1) }}>👍<p className='count'>{pp[b]}</p></span></h4>
             

              <div className='btn'>

              </div>
              <p>2009,01,15</p>
            </div>
          )
        })
      }
      {
        modal == true ? <Modal></Modal> : null
      }
    </div>

  );

}

function Modal() {   //컴포넌트 만드는 문법임
  return (
    <div className='modaltab'>
      <h5>Info</h5>
      <p>30000</p>
    </div>
  )
}

export default App;

typeOf나 console.log로 출력해보니 e state가 NaN출력값과 Str이라고 출려되고 +1 을 실행시키면 0,0,01... 이렇게 문자열에 붙는것처럼 뒤에 붙는데 이유를 알고싶습니다.