Reactjs React Todo List 应用程序我在实现删除功能时遇到问题

如果你告诉我我的错误是什么，以及我应该如何通过id删除任务，我将不胜感激！

代码:

import { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([ ]);
  const [newTask, setNewTask] = useState('');

  const handleChange = (event) => {
    setNewTask(event.target.value);
  }

  const handleAdd = () => {
    const task = {
      id: tasks.length === 0 ? 1 : tasks[tasks.length-1].id +1,
      name: newTask
      
    }
    const newArr = [...tasks, task]
    setTasks(newArr)
  }

  const handleDelete = (id) => {

    const checkFunction = () => {
      return tasks[tasks.length-1].id!=id
    };

    tasks.filter(checkFunction) 

  }
  
  return (
    <div className="App">

     <div className='add-task'>
      <input placeholder='What are you going to do today?' onChange={handleChange}></input>
      <button onClick={handleAdd}>Add Task</button>
     </div>
       
        
     <div className='tasks-list'>  
        {tasks.map((item) => {
          return (
            <div key={item.id}>
              <h1>{item.name}</h1>
              <button onClick={() => {handleDelete(item.id)}}>Delete</button>
            </div>
          )
        })}
     </div>
    </div>
  );
}

export default App;

我不知道如何使tasks.Filter()正常工作.它应该收到一个布尔值，对吗？但我不知道如何实现这一逻辑.提前谢谢！