Не получается обновить стейт на странице который пришел из useQuery?

Question

[buda pest]

Мне нужно по клику на айтемы изменить их булевое значение и никак не могу понять причину, почему не обновляются данные на странице. на сколько я понял useMutation меняет значение. но не изменяется на странице

const BASE = 'https://jsonplaceholder.typicode.com'

const apiClient = axios.create({
    baseURL: BASE,
    headers: {
        "Content-type": "application/json"
    }
});

export const getAllTodos = async (): Promise<Todos[]> => {
    const res = await apiClient.get(`/todos`);

    return res.data;
};

export const toggleTodoStatus = async (todo: Todos): Promise<Todos[]> => {
    return await apiClient.patch(`/todos/${todo.id}`, todo);
};

const TodoCard = () => {
    const queryClient = useQueryClient()

    const { data, error, isLoading } = useQuery({
        queryKey: ['todos'],
        queryFn: getAllTodos
    })

    const updateStatus = useMutation({
        mutationFn: toggleTodoStatus,
        onSuccess: () => { queryClient.invalidateQueries(['todos'])},
        onMutate: async (todo) => {
            await queryClient.cancelQueries({ queryKey: ['todos', todo.id] })
        
            const previousTodo = queryClient.getQueryData(['todos', todo.id])
        
            queryClient.setQueryData(['todos', todo.id], todo)
        
            return { previousTodo, todo }
        }
    })

    if (error) return <p>Error...</p>;
    if (isLoading) return <p>Loading...</p>;

    return (
          <ul className="todo-card">
                {data?.map((todo) => (
                    <li 
                        onClick={() => updateStatus.mutate({ ...todo, completed: !todo.completed})} 
                        className="todo-card__item" 
                        key={todo.id}
                    > 
                        {todo.title} ({todo.completed.toString()})
                    </li>
                ))}
          </ul>
    )
};
export  { TodoCard };