为什么setItem不让“编辑按钮”起作用？

我试图借助简单的挂钩为每个项目添加一个编辑按钮。我已经使用地图查看了项目的元素...。但是不知何故，当按下按钮时，什么都没有显示.....

app.js：

import React, { useState } from "react";

import TodoList from "./TodoFiles/TodoList";

const defaultItems = [
  { id: 1, title: "Write React Todo Project", completed: true },
  { id: 2, title: "Upload it to github", completed: false }
];

const App = () => {
  const [items,setItems]=useState(defaultItems)

    const editItem=({id,title})=>{
      setItems(items.map(p=>p.id===id?{...p,title}:p))

    }
  return (
     <div style={{ width: 400 }}>
      <hr />
      <TodoList
        items={items}
        editItem={editItem}/>
      <hr />
    </div>
  );
};
export default App;

TodoList.js：

import React from "react";

const TodoItem = ({ title, completed, editItem }) => {

  return (

    <div style={{ width: 400, height: 25 }}>
      <input type="checkbox" checked={completed} />
      {title}

      <button style={{ float: "right" }} onClick={() => editItem(title)}>
        Edit
      </button>
    </div>
  );
};
const TodoList = ({ items = [], index,editItem }) => {


  return items.map((p, index) => (
    <TodoItem
      {...p}
      key={p.id}
      index={index}
      editItem={editItem}
    />
  ));
};

export default TodoList;

我不想使用自定义钩子的useEffect或useReducer ...，因为我想用基础知识进行练习。对于我经常遇到的问题感到抱歉，我正在努力学习此reactjs，我不愿意提前放弃... thanx，如果可能的话，请您以纯文本形式进行一些解释，为什么它不起作用。