Removing a todo from todo list in react

I am creating this todo list app, but I can't seem to find out how to make the react icon when clicked to delete that value that it's next to.

I tried doing this:

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>
     </>
    );
   }

When I clicked the icon next to the todo it got deleted, but when I tried deleting another value it didn't work. I could only delete one todo.

What is this meant to filter?:

todos.filter((item) => item.id)

This is returning all items which have an ID, which is probably all of them, no? Generally you would filter items which match a condition. For example, all items which don't match a specific ID:

todos.filter((item) => item.id !== id)

So then you'd need a value for id, which can be passed to the function:

const click = (id) => {

And then you'd just need to pass the ID to the function:

onClick={() => click(todo.id)}