Testing useQuery with react-testing-library

I am trying to test the useQuery hook. The test (expect(screen.getByText(/Loading.../)).not.toBeInTheDocument()) seem to fail . I just keep getting loading text in dom, and not the header. Although the mockResolved is assigned/ Any idea why this is happeing ? The whole objective is to test isLoading and isError. Below is the code

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

App

import React, { useState, Fragment } from "react";
import { useQuery } from "react-query";
import { getManagers } from "./api/index";
import CustomInputSelect from "./components/CustomInputSelect";
import { processEmployeeData } from "./utils/index";
import "./App.scss";

const App = () => {

  const { isLoading, isError, error, data: employeeData } = useQuery(
    "fetchEmployees",
    getManagers
  );

  const updatedData = processEmployeeData(employeeData);

  if (isLoading) {
    return <span>Loading...</span>;
  }

  if (isError) {
    return <span>Error: {error.message}</span>;
  }

  return (
    <Fragment>
      <header>
        <h1>my header</h1>
      </header>
 <Fragment>

my test

import React from "react";
import { render, screen, act } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { QueryClient, QueryClientProvider } from "react-query";
import App from "./App";
import * as api from "./api/index";

const queryClient = new QueryClient();

const renderComponent = () => {
  render(
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
};

test("renders CustomSelect component", () => {
  const getManagerFunc = jest
    .spyOn(api, "getManagers")
    .mockResolvedValue({ data: { data: [{ firstName: "John" }] } });
  renderComponent();
  expect(getManagerFunc).toHaveBeenCalledTimes(1);
  expect(screen.getByText(/Loading.../)).not.toBeInTheDocument();
});