Toggle single todo on firebase database using react redux

[saed1]

This is my asynchronous action creator and I’m making http call to firebase database where my todo is stored and I want to toggle a single todo when the checkbox is toggled.

export const toggleTodo = (id)=> {
    return {
        type:actionTypes.TOGGLE_TODO,
        todoId:id
    }
}

export const onToggle = (todoId,toggle)=> {
    return dispatch=> {   
        axios.patch(`http://react-todoapp-10b8c-default-rtdb.asia-southeast1.firebasedatabase.app/todos/${todoId}.json`,toggle)
        .then(responseData=> {
            console.log(responseData)
            dispatch(toggleTodo(todoId));
        })
        .then(error=> console.log(error))
    }
}

This is the reducer part where I receive the todoId as the payload and then toggle the completed property if it was false it becomes true and vice versa.

case actionTypes.TOGGLE_TODO:
            return {
                todos:state.todos.map(todo=> {
                    if(todo.id === action.todoId )
                    return {
                        ...todo,
                        completed:!todo.completed
                    } 
                    return todo;
                })
            }

when I click on the checkbox I call this method and then dispatch the onToggle action.

const [isChecked,setIsChecked] = useState(false);
const dispatch = useDispatch();

const toggleHandler = (event,todoId)=> {
    event.preventDefault();
      setIsChecked(isCheck => !isCheck)    
      console.log(isChecked)
         
    console.log(todoId);

    dispatch(onToggle(todoId,isChecked))


  }

I cannot seem to figure out why my onToggle action creator is not working and when checkbox for single todo is toggled. Any help would be highly appreciated.