如何在数组中编辑对象(todo)？(reactjs)

import React, { useState } from "react";

const TodoList = () => {
  const [todos, setTodos] = useState([
    { id: 1, text: "Todo 1", completed: false },
    { id: 2, text: "Todo 2", completed: false },
    { id: 3, text: "Todo 3", completed: true }
  ]);

  const handleEdit = (id, newText) => {
    setTodos(prevTodos =>
      prevTodos.map(todo =>
        todo.id === id ? { ...todo, text: newText } : todo
      )
    );
  };

  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <input
            type="text"
            value={todo.text}
            onChange={e => handleEdit(todo.id, e.target.value)}
          />
          <button onClick={() => handleSave(todo.id)}>Save</button>
        </div>
      ))}
    </div>
  );
};

export default TodoList;