Пытаюсь удалить одну задачу, но когда я пытаюсь удалить все задачи в ответ

Почему удаляются все задачи, а не только та, на которую я нажал. Чтобы удалить каждую задачу, я использую метод массива filter(), и в моем случае он удаляет все задачи в моем списке. Что было бы лучшим вариантом для удаления отдельных элементов, если есть лучший вариант, или мне следует продолжать использовать filter()? Спасибо за помощь.

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

const Todo = () => {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState("");

  const addTodo = (e) => {
    e.preventDefault();

    setTodos([...todos, task]);
    setTask("");
    // setId(Math.random())

    console.info(task, "(task)");
    console.info(todos, "(todos)");
  };

  const removeTodo = (task) => {
    setTodos(todos.filter((todo) => todo.task !== task));

    console.info(task);
  };

  // useEffect(() => {
  //   localStorage.setItem("todos", JSON.stringify(todos));
  // });

  return (
    <div>
      <h1>To-Do Tasks</h1>
      <form onSubmit = {addTodo}>
        <input value = {task} onChange = {(e) => setTask(e.target.value)} />
        <button>Add task</button>
      </form>
      {todos.map((todo) => (
        <div key = {todo.task} id = {todo.task}>
          <h4>{todo}</h4>
          <button onClick = {() => removeTodo(todo.task)}>X</button>
        </div>
      ))}
    </div>
  );
};

export default Todo;