react入門者 渡したpropsの中身が表示されない原因が知りたい

質問内容

提示コードのList.jsx部でmemosの値をリスト表示させたいのですがなぜか表示されません。これは何が原因なのでしょうか？

実現したいこと

propsで渡した入力を表示したい

前提

react,javascript

発生している問題・エラーメッセージ

なし

該当のソースコード

App.jsx

jsx

1import {useState,useCallback} from "react";2import {List} from "./components/List"3export const App = () => {4 5 const [text,setText] = useState();6 const [memos,setMemos] = useState([]);7 8 const onClickAdd = () =>{9 const newMemos = [...memos];10 newMemos.push(text);11 setMemos(newMemos);12 13 setText("");14 }15 16 const onClickDelete = useCallback((index) =>{17 const newMemos = [...memos];18 newMemos.splice(index,1);19 setMemos(newMemos);20 },[memos])21 22 23 24 return (25 <>26 <div>27 <h1>簡単メモアプリ</h1>28 <input type="text"/>29 <button onClick={onClickAdd}> 追加 </button>30 <List memos={memos} onClickDelete={onClickDelete}/>31 </div>32 </>33);34}35 36export default App;37

List.jsx

jsx

1import style from "./../modules/style.module.css"2 3type props = {4 memos: string[],5 onClickDelete: (index)=> void;6}7export const List = (props)=>{8 9 const {memos,onClickDelete} = props;10 return (11 <div className={style.container}>12 <ul>13 {14 memos.map((memo,index) => (15 <li key={index}>16 {memo}17 console.log("aaaa"); 18 </li>19 ))}20 </ul>21 </div>22 )23}

試したこと

ChatGDTで質問
提示画像のようにコンソールログを表示してそこに処理が到達しているか確認

ここにより詳細な情報を記載してください。