我在react中创建了一个简单的待办事项列表，当我删除一个任务时，它不会立即更新，但是当我在输入中进行更改时，我不知道为什么会发生。试图改变deleteTask的工作方式，但我没有找到解决方案。
form.jsx

import { useState } from 'react';
import './styles/form.css';
import Tasks from './tasks';

function TaskForm() {
  const initialList = [{task: 'Do something', done: false}];
  const [tasks, setTasks] = useState(initialList);
  const [input, setInput] = useState('');
  const [validTask, setValidTask] = useState('valid');
  const addTask = () => {
    if(input.length !== 0) {
      setValidTask('valid');
      setTasks(tasks.push({task: input, done: false}));
      setTasks(tasks);
      setInput('');
    }
    else {
      setValidTask('invalid');
    }
    console.log(tasks);
  }
  return (
    <>
      <div className='maindiv'>
        <p>Task app</p>
        <input maxLength={32} value={input} placeholder='add a new task...' onChange={e => setInput(e.target.value)}/><br />
        <p style={{color: 'red'}} className={validTask}>Task can't be empty</p>
        <input type='submit' value='Add task' onClick={addTask}/>
      </div>
      <Tasks tasks={tasks}/>
    </>
  );
}

export default TaskForm;

tasks.jsx

import { useState } from 'react';
function Tasks(props) {
  const [tasks, setTasks] = useState(props.tasks);
  const deleteTask = (index) => {
    tasks.splice(index, 1);
    setTasks(tasks);
    
  };
  const taskList = props.tasks.map(task => (
    <li key={task.id}>
      <input type='checkbox' value={task.done} /> 
      {task.task}
      <input type='button' value='delete' onClick={() => deleteTask(task.id)} />
    </li>
  ));
  return <ul>{taskList}</ul>;
}

export default Tasks;