모달창 안띄워짐

네  크롬 콘솔창에서 에러도 없고 코드도 제대로 짠거 같은데 안뜹니다 ㅠㅠ

sub 컴포넌트 코드입니다!

function Sub(props){
  return (
    <div className = "modal">
      <h2>{ props.제목[props.넘버]}</h2>
      <p>{props.날짜+props.넘버}일</p>
      <p>맑음</p>
    </div>
  )
}

let [서브, 서브변경] = useState(false); 이렇게 만들었습니다 

소괄호로 묶었는데도 안뜨네요 ㅠㅠ

/* eslint-disable */
import './App.css';
import {Navbar,Container,Nav,NavDropdown,Jumbotron,Button} from 'react-bootstrap';
import React, {useState} from 'react';

function App() {
  let [제목, 제목변경] = useState(['오늘의 날씨','내일의 날씨','모레의 날씨']);
  let [따봉, 따봉변경] = useState([0, 0 ,0]);
  let [서브, 서브변경] = useState(false);
  let [클릭된거, 클릭된거변경] = useState(0);
  let [입력값, 입력값변경] = useState('');

  let today = new Date();
  let year = today.getFullYear();
  let month = today.getMonth()+1;
  let date = today.getDate();

  function 따봉추가(){
    var newArray = [...따봉];
    newArray.unshift(0);
    따봉변경( newArray );
  }
  return (
    <div className="App">
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Container>
  <Navbar.Brand href="#home">Write Free</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
    <Nav className="me-auto">
      <Nav.Link href="#features">Features</Nav.Link>
      <Nav.Link href="#pricing">Pricing</Nav.Link>
      <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
        
      </NavDropdown>
    </Nav>
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
  </Container>
</Navbar>

<Jumbotron className = "background">
  <h1>WELCOM</h1>
  <p>
    자유롭게 이용해 봅시다.
  </p>
 
</Jumbotron>

<Jumbotron className = "interview">
  <h1>Shop & Review</h1>
  <p style = {{color : "black"}}>
    아래의 일러스트를 확인하세요. 그리고 리뷰도 적어보세요
  </p>
  <p>
  <Button variant="secondary">Secondary</Button>
  </p>
</Jumbotron>
      <hr/>
      <h3>대표 일러스트</h3>
      <hr/>

<div className = "container">
  <div className = "row">
    <div className = "col-md-4">

    // img 안 src가 길어서 보기 힘드실까봐 생략합니다! 

      <p>이두나 일러스트</p>
    </div>
  </div>
</div>

      <hr/>
      <h3>TODAY IS GOOD DAY</h3>
      {/* <button onClick = { 제목바꾸기 }>버튼</button> */}
      <hr/>
      {
        제목.map(function(글,i){
          return (<div className = "list" key = {i}>
          <h3><a onClick={()=>{클릭된거변경(i); 서브변경(!서브)}}> {글}</a><span onClick={ ()=>{ let copy = [...따봉]; copy[i]++; 따봉변경(copy)} }>? {따봉[i]}</span></h3>
          <p>{year}년 {month}월{date+i} 일</p>
          <hr/>

          {
           서브 === true
           ? <Sub 제목={제목} 날짜 = {date} 넘버 = {클릭된거} />
           : null
          }

         </div>
          )
        })

      }
      

      <div className = "publish">
        <h3>WRITE YOUR THINK</h3>
        <input onChange = {(e)=>{입력값변경(e.target.value)}}/>
        <Button variant="secondary" onClick = {()=>{var copy = [...제목];copy.unshift(입력값);제목변경(copy); 따봉추가();}}>저장</Button>

        
      </div>

    </div>
  );
}

function Sub(props){
  return (
    <div className = "modal">
      <h2>{ props.제목[props.넘버]}</h2>
      <p>{props.날짜+props.넘버}일</p>
      <p>맑음</p>
    </div>
  )
}

export default App;

전체 코드입니다! 

친절한 답변 감사합니다!!