Next JS stopped hot reloading after using QueryClientProvider. Also onClick stopped working

[archan96]

How to fix this problem. Do anyone have any idea?

here's my code for _app.js

import "@/styles/globals.css";
import { Hydrate, QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { wrapper } from "@/store/store";

export const queryClient = new QueryClient();

const App = ({ Component, pageProps }) => {
return (


<Component {...pageProps} />


);
};

export default wrapper.withRedux(App);

Starts working again once I remove the wrapper.

[archan96]

import "@/styles/globals.css";
import { Hydrate, QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { wrapper } from "@/store/store";

export const queryClient = new QueryClient();

const App = ({ Component, pageProps }) => {
return (
"<"QueryClientProvider client={queryClient}">"
"<"Hydrate state={pageProps.dehydratedState}">"
<Component {...pageProps} />
"<"/Hydrate">"
"<"/QueryClientProvider">"
);
};

export default wrapper.withRedux(App);

the code.