React Todoアプリの削除機能についての質問。

Question

React初学者です。
現在、Hooksを使って簡単なTodoアプリを作成しているのですが、削除機能(removeTaskという関数)を実装していたところ、initialStateにある内容が上手く表示されなくなりました。
下記のコードの通りなのですが、どこに問題となっている部分があるでしょうか、ぜひ教えていただければ幸いです...。

import React, { useState } from 'react';
import { v4 as uuid } from 'uuid';

function App() {
  const initialState = [
    {
      id: uuid(),
      name: 'Reactの基礎をあと3日〜5日で覚える',
    },
  ];

  const [todos, setTodos] = useState(initialState);
  const [task, setTask] = useState('');

  const onChange = (e) => {
    setTask(e.target.value);
  };

  const addTask = () => {
    setTodos(...todos, {
      id: uuid(),
      name: task,
    });
  };

  const removeTask = (id) => {
    const newTodos = todos.filter((todo) => todo.id !== id);
    setTodos(newTodos);
  };

  return (
    <div>
      <h1>ToDo List</h1>
      Add Task: <input type='text' value={task} onChange={onChange} />{' '}
      <button onClick={addTask}>追加する</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.name} <button onClick={removeTask(todo.id)}>X</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Answer 1

関係あるか確信は持てていないのですが、 removeTaskのstateの更新処理で前回の値を参照される場合は、setTodosにFunctionを渡してみてください。