Javascript 函数不是将特定的 Todo 标记为已完成，而是将所有 Todo 标记为已完成

我试图将目标待办事项标记为已完成，但当我按和待办事项为已完成时，所有列表都被标记为已完成，我试图找出原因，有人能解释一下我做错了什么吗？我还是个初学者，正在努力理解这样的行为.

函数handleDoneTask应该 for each 待办事项运行，当我按Done时，它应该在列表中将特定待办事项标记为已完成任务

import { useState } from "react";
import "./App.scss";

function App() {
  //Value of Input
  const [val, setVal] = useState("");
  const [todos, setTodos] = useState([]);
  const [doneTask, setDoneTast] = useState(false);

  const addTodos = (e) => {
    if (val == "") return;
    e.preventDefault();
    setTodos([...todos, val]);
    setVal("");
  };

  const handleDelete = (id) => {
    setTodos(todos.filter((_, key) => key !== id));
  };

  const handleDoneTask = (id) => {
    const DoneArray = [...todos];
    DoneArray.map((_, key) => {
      if (id === key) {
        setDoneTast(true);
      }
    });
  };

  
  return (
    <div className="App">
      {/** On change values*/}
      <form onSubmit={addTodos}>
        <input
          onChange={(e) => setVal(e.target.value)}
          value={val}
          type="text"
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo, key) => (
          <div className="arrange" key={key}>
            <li className={doneTask ? "doneTask" : null}>{todo}</li>
            <a onClick={() => handleDoneTask(key)}>Done</a>
            <a onClick={() => handleDelete(key)}>Cancel</a>
          </div>
        ))}
      </ul>
    </div>
  );
}

export default App;


//css
.doneTask {
   text-decoration: line-through!important;

}