GetQueryData всегда возвращает неопределенное значение, даже если установлено с помощью useMutation — TanStack Query, React

Когда я пытаюсь прочитать содержимое кэша данного ключа, я получаю неопределенное значение даже после того, как вызываю useMutation с точно таким же ключом.

Мутация, используемая для установки кеша (мутация возвращает правильные данные, как и ожидалось):

const axiosInstance = axios.create(habiticaAPIconf);

function parseResponse(response:LoginDataContract):AuthData{
  return {
    id: response.data.id,
    apiToken: response.data.apiToken,
    username: response.data.username
  }
}

const getAuthenticationData = async (userCredentials:UserCredentials):Promise<AuthData> => {
  const response = await axiosInstance.post<LoginDataContract>("/user/auth/local/login", {...userCredentials});
  return parseResponse(response.data);
}

export function useCredentialData() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (loginData:UserCredentials):Promise<AuthData> => getAuthenticationData(loginData),
    mutationKey: ['authData']
  });
};

Компонент, используемый для запуска мутации:

export function LoginForm() {
  const { mutate, isSuccess, data } = useCredentialData();

  function handleLogin(e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) {
    e.preventDefault();
    mutate({
      username: (document.getElementById("email") as HTMLInputElement).value,
      password: (document.getElementById("password") as HTMLInputElement).value
    });
    console.info(data);
  }

  return (
    <form>
      <label htmlFor = "email">
        <input type = "email" name = "email" id = "email"></input>
      </label>
      <label htmlFor = "password">
        <input type = "password" name = "password" id = "password"></input>
      </label>
      <button type = "submit" onClick = { (e)=> {handleLogin(e)}}>Login</button>
      <span>{isSuccess ? `${data.username}` : ""}</span>
    </form>
  )
}

При нажатии кнопки в компоненте React всегда возвращается неопределенное значение даже после вызова вышеупомянутой мутации и возвращает правильные данные.

import { useQueryClient } from "@tanstack/react-query";

export function SidebarTasksList() {
  const queryClient = useQueryClient();

  return (
    <section>
      <button onClick = {
        ()=>console.info(queryClient.getQueryData(['authData']))
      }>CLICK</button>
    </section>
  );

Как получить данные, хранящиеся в кеше ['AuthData']? Также нет функции, которую я мог бы передать useQuery как queryFn, поэтому я использую getQueryData.

🤔 А знаете ли вы, что...
React обеспечивает реактивное обновление интерфейса при изменении состояния.