_reactQuery.QueryClient is not a constructor - reactjs

Question

I am trying to start writing tests using jest and react-testing-library but when I try to import a react component which should be wrapped in QueryClientProvider, It throws the error
TypeError: _reactQuery.QueryClient is not a constructor
18 | ]
19 |
> 20 | const createTestQueryClient = () => new QueryClient({
| ^
21 | defaultOptions: {
22 | queries: {
23 | retry: false,
//testUtils.tsx
import { render } from '#testing-library/react'
import { rest } from 'msw'
import * as React from 'react'
import {QueryClient, QueryClientProvider } from 'react-query'
export const handlers = [
rest.get(
'*/react-query',
(req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
name: 'mocked-react-query'
})
)
}
)
]
const createTestQueryClient = () => new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
})
export function renderWithClient(ui: React.ReactElement) {
const testQueryClient = createTestQueryClient()
// const testQueryClient = new QueryClient();
const { rerender, ...result } = render(
<QueryClientProvider client={testQueryClient}>{ui}</QueryClientProvider>
)
return {
...result,
rerender: (rerenderUi: React.ReactElement) =>
rerender(
<QueryClientProvider client={testQueryClient}>{rerenderUi}</QueryClientProvider>
),
}
}
export function createWrapper() {
const testQueryClient = createTestQueryClient()
// const testQueryClient = new QueryClient();
return ({ children }: {children: React.ReactNode}) => (
<QueryClientProvider client={testQueryClient}>{children}</QueryClientProvider>
)
}
//OrgDetails.test.tsx
import { render, screen } from "#testing-library/react";
import {QueryClient, QueryClientProvider} from "react-query";
import OrgDetails from "./OrgDetails";
import { renderWithClient } from './testUtils'
var MockData = {
organization_id: "test",
name: "test",
installations: [
{
ID: 24148217,
CreatedAt: "2022-08-26T09:34:40.220008Z",
UpdatedAt: "2022-08-26T09:34:40.220008Z",
DeletedAt: null,
organizationID: "test",
accountID: 35756816,
targetType: "User",
},
],
environments: null,
kube_integrations: null,
basic_integrations: null,
oidc_integrations: null,
};
jest.mock("react-query", () => ({
useQuery: jest
.fn()
.mockReturnValue({ data: { ...MockData }, isLoading: false, error: {} }),
}));
test("show correct org name", () => {
const result = renderWithClient(<OrgDetails />)
});