I'm coding simple todo list. Delete items doesn't work by click on it. What can be wrong? Is filtering array and setting state is right?

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