For some reason, this code works:

const Task = ({task, onDelete, onToggle}) => {
    return (
        <div className="task" 
            onClick={() => onToggle(task.id)}> 
        </div>

But this one doesn't:

const Task = ({task, onDelete, onToggle}) => {
        return (
            <div className="task" 
                onDoubleClick={() => onToggle(task.id)}> 
            </div>

The rest of the code is this, if it helps:

App.js

const toggleReminder = (id) => {
        console.log("double click!", id);
    }

    return (
    <div className="container">
    <Header title="Task Tracker"/>
    {tasks.length > 0 ? (
        <Tasks tasks={tasks} onDelete={deleteTask} onToggle={toggleReminder}/>
        ) : ("No Tasks to show")
        }

Tasks.js

const Tasks = ({ tasks, onDelete, onToggle }) => {
  return (
    <>
      {tasks.map((task, index) => (
        <Task key={index} task={task} onDelete={onDelete} onToggle={onToggle} />
      ))}
    </>
  )
}

And Task.js

const Task = ({task, onDelete, onToggle}) => {
    return (
        <div className="task" 
            onDoubleClick={() => onToggle(task.id)}>

            <h3>{task.text} 
            <FaTimes
            style={{color:"red", cursor: 'pointer'}} 
            onClick={()=> onDelete(task.id)}/>
            </h3>
            <p>{task.day}</p>
        </div>

    )

}

I've been copying everything from a tutorial, and I really don't understand the problem. With onClick it works just fine. Do they work differently? I saw a similar question but did not understand the answer Thank you!