props 오류

import './App.css';
import './layout.css';
import './write.css';
import { useState } from 'react';
import ApiTest from './ApiTest';
import WriteModal from './WriteModal';

function App() {

let [title, setTitle] = useState(['3.글제목','2.글제목','1.글제목']);
let [clickTitle, setClickTitle] = useState('');
let [count, setCount] = useState([0, 0, 0]);
let [modal, setModal] = useState(false);
let [writeModal, setWriteModal] = useState(false);
let [backgroundCover, setBackgroundCover] = useState(false);

const toggleBackgroundCover = () => {
setBackgroundCover(!backgroundCover);
 };

return (
<>
{backgroundCover && <BackgroundCover />}
<div className='navBar'>
<h1>ReactBlog</h1>
</div>
<div className='title'>
<h2>글 목록</h2>
<button className='sort' onClick={() => {
let copy = [...title];
setTitle(copy.sort());
 }}>순서정렬</button>
</div>

{
title.map(function(a, i){
return(
<li className='list' key={a}>
<h3 onClick={()=>{ setClickTitle(title[i]); setModal(!modal)}}>{title[i]} <span style={{cursor:'pointer'}} onClick={(e)=>{ e.stopPropagation(); let copy = [...count]; copy[i] = copy[i]+1; setCount(copy)}}> 👍 </span> {count[i]} </h3>
<p>10월 16일 발행</p>

 )
 })
}

<button onClick={()=> {setWriteModal(!writeModal); toggleBackgroundCover();}}>글쓰기</button>
{
writeModal ? <WriteModal></WriteModal> : null
}
{
modal ? <Modal></Modal> : null
}
{/*<ApiTest></ApiTest>*/}
</>
 );
};

<WriteModal></WriteModal>

function BackgroundCover(props){
return(
<div className='backgroundCover'></div>
 )
}

function Modal(props){
return (
<div className='modal'>
<h4>제목 : {props.title} </h4>
<p>날짜 : </p>
<p>상세내용 : </p>
<button onClick={()=> props.changeTitle}>글수정</button>
</div>
 )
};

export default App;
----------------------------------------------

import React, {useState} from "react";

function WriteModal(props){
let [inputValue, setInputValue] = useState('');
return (
<div className='writeModal'>
<input type='text' placeholder='제목을 입력하세요' className='titleText'></input>
<textarea placeholder='내용을 입력하세요' className='commentText'></textarea>
<button className='submit' onClick={(e)=>{
setInputValue(e.target.value);
let copy = [...props.title];
copy.unshift(inputValue);
props.setTitle(copy);
 } }>글발행</button>
</div>
 )
 };

export default WriteModal;

WriteModal 에서 props.title is not iterable 오류가 나옵니다 ... (2틀째 봐도 모르겠습니다.)