我正在创建这个待办事项列表应用程序，但我似乎找不到如何使React图标时，点击删除该值，它的旁边。
我试着这样做：

const click = () => {
    setTodos(todos => todos.filter((item) => item.id));
  }

  return (
    <>
    <h2>Your Todos</h2>
     <NewTodo onAdd={(newTodo) => setTodos([...todos, newTodo])} />
      <ul>
    {visibleTodos.map((todo) => (
      <li key={todo.id}>
        {todo.text}
        <button onClick={click}><AiFillDelete /></button>
          </li>    
        ))}
      </ul>
     </>
    );
   }

当我点击todo旁边的图标时，它被删除了，但是当我试图删除另一个值时，它不起作用。我只能删除一个todo。