모달창만들기 숙제 질문입니다.

아래와 같이 코드를 짰는데요 number = number + 1값이 setdota2(copy3); 만 지나면 고장납니다. 
setdota2(copy3);를 주석처리하면 넘버값이 1씩 정상적으로 증가하는데요 
setdota2(copy3);가 활성화 되어있으면 값이 1, 1 , 2 가 반복적으로 출력이 됩니다. 
오랜 시간 동안 혼자 고민하다가 도저히 모르겠어서 질문을 올려봅니다. 감사합니다.


import './App.css';
import { useState } from 'react';

function App() {
  let post = "제목들을짓기귀찮아";
  let [글제목,제목변경] = useState(['남자 코트 추천','강남 우동 맛집','리엑트 독학']);
  let [따봉,따봉더하기] = useState(0);
  let [Dota2,setdota2] = useState(false);
  let [number,numberstate] = useState(0);
  return (
    <div className="App">
      <div className="blogWarp">
        <h4>{post}</h4>
      </div>
      <div className="list">
        <h4>{글제목[0]}
          <span onClick={()=>{ 따봉더하기(따봉 = 따봉 + 1)}}>
            👍
          </span>
          {따봉}
        </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">

        <h4 onClick={()=>{
           (number = number + 1);
            
           let copy3 = [Dota2];
            {
              number%2 == 1 ?copy3 = true :copy3 = false
            }
            
            setdota2(copy3);

          console.log(number);

        }}>
          {글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <button onClick={function(){
        let copy = [...글제목];
        copy[0] = '여자 코트 추천';
        제목변경(copy);
      }}>눌러</button>
      <button onClick={function(){ 
        let copy2 = [...글제목];
        copy2.sort();
        console.log(copy2);
        제목변경(copy2);
      }}>정렬</button>
      <Modal></Modal>
      {
        Dota2 == true ? <Dota/> : null
      }

    </div>
    
  ); 
}
function Modal(){
  return(
    <>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
      <div></div>
    </>
  )
}
function Dota(){
  return(
    <>
    <div className="dota">
      <h3>제목</h3>
      <p>Dota</p>
      <p>Is</p>
      <p>Love</p>

    </div>
    <div></div>
    </>
  )
}

export default App;