10 분 리액트 환경에서 동적인 UI 버튼 온틀릭 미작동

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

function App() {
let post = "리액트 초보 탈출";
let [글제목, 글제목변경] = useState(["코딩애플학습 ", "애플", "리액트학습"]);
let [따봉, 따봉변경] = useState(0);
let [modal, setModal] = useState(false);
return (
<div className="App">
<div className="black-nav">
<div>개발 blog</div>
</div>
<button onClick={() => {
let copy = [...글제목];
copy[0] = '오늘은 1시간 추가 근무';
글제목변경(copy);
}}> 글수정</button>
<div className="list">
<h4> {글제목[0]} <span onClick={() => { 따봉변경(따봉 + 1) }} >👍</span> {따봉}</h4>
<p>5월 30일 발행</p>
</div>
<div className="list">
<h4> {글제목[1]} </h4>
<p>5월 30일 발행</p>
</div>
<div className="list">
<button onClick={() => { setModal(!modal) }}> {글제목[2]} </button>
{
modal == true ? <Modal></Modal> : null
}
<p>5월 30일 발행</p>
</div>

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

export default App;

온클릭 버튼이 작동이 안되는데 어떤 실수를 했을까요? ㅠㅠ