如何在React中实时删除HTML的一部分

我的React应用程序中有组件，首先：

const App = () => {

  const [tasks, setTasks] = useState([])

  useEffect(() =>{
    getTasks(data => setTasks(data))
  }, [])


  const onNewTask = task => {
    setTasks(prev => ([
      ...prev,
      task
    ]))
  }

  const onRemoveTask = () => {
    setTasks(prev => ([
      ...prev,
    ]))
  }

  
  return (
    <>
    <NewTask add={onNewTask}/>
    <Task tasks={tasks} remove={onRemoveTask}/>,
    </>
  )
}

此组件呈现两个孩子：在comp newTask中，有一个方法，用户可以在其中添加新任务，该方法：

const addNewTask = e => {
    e.preventDefault();
    fetch(`${API_URL}/tasks`, {
        method: 'POST',
        headers: {
            Authorization: API_KEY,
            "Content-Type": "application/json"
        },
        body: JSON.stringify(inputs)
    })
    .then(response => response.json())
    .then(data => add(data.data))
    .catch(e => console.warn(e))
}

由于App组件中的onNewTask方法，它可以正常工作，用户可以添加任务，并且可以自动以HTML形式显示。

我的问题是类似的，但是在删除任务的情况下，我在Task组件中有一个方法：

const handleDeleteTask = e => {
    e.preventDefault();
    const taskToRemove = e.target.id;
    console.log(taskToRemove)
    taskToRemove ? 
    fetch(`${API_URL}/tasks/${taskToRemove}`, {
        method: 'DELETE',
        headers: {
            Authorization: API_KEY,
            "Content-Type": "application/json",
        },
    })
    .then(remove())
    .catch(err => console.warn(err))
    :
    console.log('Error')
}

它删除了任务，但是用户需要刷新页面以使任务从HTML中消失。我知道我的方法不正确。有人可以告诉我怎么做吗？

提前致谢。