Как правильно объявить стрелочную функцию в React?

В чем разница между

document.addEventListener("click", (e) => handleClick(e));

и

document.addEventListener("click", handleClick);

В первом случае в консоль выводится:

Во втором случае:

То есть в два раза меньше.

import React, {useState, useEffect} from 'react'
import TodoList from './TodoList'

export default function App () {

  const [todos, setTodos] = useState([]);
  const [todoTitle, setTodoTitle] = useState("");
  const [changed, setChanged] = useState(false);

  const handleClick = (e) => console.log("click", e.target);

  useEffect(() => {
    const raw = localStorage.getItem("todos") || JSON.stringify([]);
    setTodos(JSON.parse(raw));
  }, []);

  useEffect(() => {
    document.addEventListener("click", (e) => handleClick(e));
    localStorage.setItem("todos", JSON.stringify(todos));
    
    return () => {
      document.removeEventListener("click", handleClick);
    }
  })

  const addTodo = event => {
    if (event.key === "Enter") {
      setTodos([
        ...todos,
        {
          id: Date.now(),
          title: todoTitle,
          completed: false
        }
      ])
      setTodoTitle("");
    }
  }
    return (
      <div className="container">
        <h1>Todo app</h1>
          <div className="input-field">
            <input
              type="text"
              value={todoTitle}
              onChange={e => setTodoTitle(e.target.value)}
              onKeyPress={addTodo}
              />
            <label>Todo name</label>
          </div>
          <TodoList todos={todos} />
          <button onClick = {() => setChanged(!changed)}>button</button>
      </div>
    );
}