Как вернуть прежний checkbox при неудачном запросе на сервер?

Question

[HelloJesus]

Не буду кидать весь проект(так как он не поместится):
App компонента:

const App = ({}) =>{
let [task, setTask] = useState('')

useEffect(()=>{
axios.get('http://localhost:3000/task').then((res)=>{
setTask(res.data)
}
}, [])

const onUpdateTask = (isCompleted)=>{
//обновление state
}

const updateTask = (isCompleted) => {
        axios.patch('http://localhost:3000/task' , {
            isCompleted: isCompleted
        }).then(() => {
            onUpdateTask(isCompleted)
        }).catch(() => {
            alert('не удалось обновить задачу')
        })
    }
return <Task item={item} updateTask ={updateTask }/>
}

Task компонента:

const Task = ({item, updateTask }) =>{
let [checked, setChecked] = useState(item.isCompleted)
}

const changeIsCompleted = () =>{
setChecked(!checked)
updateTask (!checked)
}

return <div>
<label>
<input  type="checkbox"  checked={checked || ''}  onChange={() => changeIsCompleted()}/>
<span className={item.isCompleted ? "active" : ""}>Кастомный checkbox</span>
</label>
</div>
}

Допустим у юзера слабое 3g интернет соединение.
Когда юзер делает клик по input, то на сервер отправляется запрос, пока он обрабатывается, юзер не видит результата.
Он снова кликает, потому что не понимает почему не работает.
Подождав 2-3 секунды, он видит результат.
Как сделать так, чтобы результат клика было сразу видно, но, если с сервера приходил неудачный ответ, то возвращать значение checkbox на место?