array, object state 변경하는 법 숙제 질문입니다.

https://youtube.com/shorts/LGRTLVvcylk?feature=share

버튼에 기능 개발을 하고자 button 에 onclick 을 달아서 저장하였습니다.

기능을 붙여둔 버튼을 누를때는 html이 변하지 않고, span(따봉숫자)을 누르니 한꺼번에 변경이 됩니다.
왜 이런걸까요? 선생님 코드와 동일하게 복붙해두었습니다.

      <button
        onClick={() => {
          글제목[0] = "여자 코트 추천";
          글제목변경(글제목);
        }}
      >
        버튼
      </button>

전체코드

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

function App() {
  let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "여자 코트 추천",
    "강남 우동 맛집",
  ]);
  let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
      <button
        onClick={() => {
          글제목[0] = "여자 코트 추천";
          글제목변경(글제목);
        }}
      >
        버튼
      </button>
      <div className="list">
        <h4>{글제목[0]}</h4>
        <span
          onClick={() => {
            따봉변경(따봉 + 1);
          }}
        >
          {따봉}
        </span>
        <p> 2월 17일 발행 </p>
      </div>
    </div>
  );
}

export default App;