Estoy codificando una lista de tareas simples. Eliminar elementos no funciona haciendo clic en él. ¿Qué puede estar mal? ¿La matriz de filtrado y el estado de configuración son correctos?

 import React from "react"; import { useState } from "react"; export const ToDoComponent = () => { const inputResult = { id: Date.now(), value: "", }; const [value, setValue] = useState([]); const onChange = (event) => { inputResult.value = event.target.value; }; const addTask = (event) => { setValue([{ inputResult }, ...value]); }; const delTask = (id) => { const res = value.filter((delId) => id !== delId.id); setValue(res); // console.log("test") }; return ( <div> <h1 className="Title">Todo list</h1> <input onChange={onChange} className="Input"></input> <button className="Button" onClick={addTask}> Add task </button> <ul> {value.map(({ inputResult }) => ( <li onClick = {delTask(inputResult.id)} key={inputResult.id}> {inputResult.value} </li> ))} </ul> </div> ); };