props 안되어 질문

props를 넣으면 콘솔에 App.js:71 Uncaught TypeError: Cannot read properties of undefined 가 나오고,
창이 뜨지를 않습니다.
확인을 해보면     <h4>{props.글제목[0]}</h4> 이 부분이 잘못되었다고 하는데,  인덱스를 넣는 [0] 이 부분이 문제인거 같습니다.
인덱스를 넣지 않으면 글제목에 내용이 다 구현되기는 하나, 창은 문제없이 작동합니다.
어떤게 해야될지 답변 부탁드립니다.

/*eslint-disable*/
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {
    
    let post = '강남 고기 맛집'
    let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])
    let [따봉, 따봉변경] = useState([0,0,0]);
    let [modal, setModal] = useState(false);

    return (
    <div className="App">
      <div className='nav-black'>
        <h4>React Blog</h4>
      </div>
         <div className='list'>
          <h4>{글제목[0]} <span onClick={() => {따봉변경(따봉 + 1);}}>👍</span>{따봉}</h4>
          <p> 2월 17일 발행</p>
          <button onClick={() => {
            let copy = [...글제목];
            copy[0] = '여자 코트 추천'
            글제목변경(copy)}}>변경</button>
        </div>
        <div className='list'>
          <h4>{글제목[1]}</h4>
          <p> 2월 17일 발행</p>
        </div>
        <div className='list'>
          <h4 onClick={()=>{ setModal(!modal) }}>{글제목[2]}</h4>
          <p> 2월 17일 발행</p>
        </div>

        {
          modal == true ? <Modal 글제목={글제목}/> : null
        }

            <Modal/>

        <button onClick={ () => {
          let copyname = [...글제목];
          copyname.sort();
          글제목변경(copyname)
        }} >가나다순 정렬</button>

        {
          글제목.map(function(a, i){
            return (
              <div className='list' key={i}>
              <h4>{글제목[i]} <span onClick={()=>{ 
              let copy = [...따봉];
              copy[i]++;
              따봉변경(copy)  
              }}>👍</span>{따봉}</h4>
              <p> 2월 17일 발행</p>
            </div>
            )
          })
      }
      
      
    </div>
  );
}

function Modal(props) {
  return (
    <div className='modal'>
    <h4>{props.글제목[0]}</h4>
    <p>날짜</p>
    <p>상세내용</p>
  </div>
  )
}