@tanstack/react-query-devtools not working

[Istiak-A-Tashrif]

My page showed blank when I try to implement react query devtools and consoled me this error.

chunk-MX77MS2G.js?v=60adffb7:21580 Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
@tanstack_react-query-devtools.js?v=f301ccb8:262 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient (@tanstack_react-query-devtools.js?v=f301ccb8:262:11)
at ReactQueryDevtools (@tanstack_react-query-devtools.js?v=f301ccb8:430:23)
at renderWithHooks (chunk-MX77MS2G.js?v=60adffb7:11568:26)
at mountIndeterminateComponent (chunk-MX77MS2G.js?v=60adffb7:14946:21)
at beginWork (chunk-MX77MS2G.js?v=60adffb7:15934:22)
at HTMLUnknownElement.callCallback2 (chunk-MX77MS2G.js?v=60adffb7:3674:22)
at Object.invokeGuardedCallbackDev (chunk-MX77MS2G.js?v=60adffb7:3699:24)
at invokeGuardedCallback (chunk-MX77MS2G.js?v=60adffb7:3733:39)
at beginWork$1 (chunk-MX77MS2G.js?v=60adffb7:19793:15)
at performUnitOfWork (chunk-MX77MS2G.js?v=60adffb7:19226:20)
useQueryClient @ @tanstack_react-query-devtools.js?v=f301ccb8:262
ReactQueryDevtools @ @tanstack_react-query-devtools.js?v=f301ccb8:430
renderWithHooks @ chunk-MX77MS2G.js?v=60adffb7:11568
mountIndeterminateComponent @ chunk-MX77MS2G.js?v=60adffb7:14946
beginWork @ chunk-MX77MS2G.js?v=60adffb7:15934
callCallback2 @ chunk-MX77MS2G.js?v=60adffb7:3674
invokeGuardedCallbackDev @ chunk-MX77MS2G.js?v=60adffb7:3699
invokeGuardedCallback @ chunk-MX77MS2G.js?v=60adffb7:3733
beginWork$1 @ chunk-MX77MS2G.js?v=60adffb7:19793
performUnitOfWork @ chunk-MX77MS2G.js?v=60adffb7:19226
workLoopSync @ chunk-MX77MS2G.js?v=60adffb7:19165
renderRootSync @ chunk-MX77MS2G.js?v=60adffb7:19144
performConcurrentWorkOnRoot @ chunk-MX77MS2G.js?v=60adffb7:18706
workLoop @ chunk-MX77MS2G.js?v=60adffb7:197
flushWork @ chunk-MX77MS2G.js?v=60adffb7:176
performWorkUntilDeadline @ chunk-MX77MS2G.js?v=60adffb7:384
Show 16 more frames
Show lessUnderstand this error
@tanstack_react-query-devtools.js?v=f301ccb8:262 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient (@tanstack_react-query-devtools.js?v=f301ccb8:262:11)
at ReactQueryDevtools (@tanstack_react-query-devtools.js?v=f301ccb8:430:23)
at renderWithHooks (chunk-MX77MS2G.js?v=60adffb7:11568:26)
at mountIndeterminateComponent (chunk-MX77MS2G.js?v=60adffb7:14946:21)
at beginWork (chunk-MX77MS2G.js?v=60adffb7:15934:22)
at HTMLUnknownElement.callCallback2 (chunk-MX77MS2G.js?v=60adffb7:3674:22)
at Object.invokeGuardedCallbackDev (chunk-MX77MS2G.js?v=60adffb7:3699:24)
at invokeGuardedCallback (chunk-MX77MS2G.js?v=60adffb7:3733:39)
at beginWork$1 (chunk-MX77MS2G.js?v=60adffb7:19793:15)
at performUnitOfWork (chunk-MX77MS2G.js?v=60adffb7:19226:20)
useQueryClient @ @tanstack_react-query-devtools.js?v=f301ccb8:262
ReactQueryDevtools @ @tanstack_react-query-devtools.js?v=f301ccb8:430
renderWithHooks @ chunk-MX77MS2G.js?v=60adffb7:11568
mountIndeterminateComponent @ chunk-MX77MS2G.js?v=60adffb7:14946
beginWork @ chunk-MX77MS2G.js?v=60adffb7:15934
callCallback2 @ chunk-MX77MS2G.js?v=60adffb7:3674
invokeGuardedCallbackDev @ chunk-MX77MS2G.js?v=60adffb7:3699
invokeGuardedCallback @ chunk-MX77MS2G.js?v=60adffb7:3733
beginWork$1 @ chunk-MX77MS2G.js?v=60adffb7:19793
performUnitOfWork @ chunk-MX77MS2G.js?v=60adffb7:19226
workLoopSync @ chunk-MX77MS2G.js?v=60adffb7:19165
renderRootSync @ chunk-MX77MS2G.js?v=60adffb7:19144
recoverFromConcurrentError @ chunk-MX77MS2G.js?v=60adffb7:18764
performConcurrentWorkOnRoot @ chunk-MX77MS2G.js?v=60adffb7:18712
workLoop @ chunk-MX77MS2G.js?v=60adffb7:197
flushWork @ chunk-MX77MS2G.js?v=60adffb7:176
performWorkUntilDeadline @ chunk-MX77MS2G.js?v=60adffb7:384
Show 17 more frames
Show lessUnderstand this error
chunk-MX77MS2G.js?v=60adffb7:14052 The above error occurred in the component:

at ReactQueryDevtools (http://localhost:5173/node_modules/.vite/deps/@tanstack_react-query-devtools.js?v=f301ccb8:430:44)
at QueryClientProvider2 (http://localhost:5173/node_modules/.vite/deps/react-query.js?v=8d0961af:2673:21)
at AuthProvider (http://localhost:5173/src/AuthProvider/AuthProvider.jsx?t=1715868875407:32:25)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ chunk-MX77MS2G.js?v=60adffb7:14052
update.callback @ chunk-MX77MS2G.js?v=60adffb7:14072
callCallback @ chunk-MX77MS2G.js?v=60adffb7:11268
commitUpdateQueue @ chunk-MX77MS2G.js?v=60adffb7:11285
commitLayoutEffectOnFiber @ chunk-MX77MS2G.js?v=60adffb7:17115
commitLayoutMountEffects_complete @ chunk-MX77MS2G.js?v=60adffb7:18008
commitLayoutEffects_begin @ chunk-MX77MS2G.js?v=60adffb7:17997
commitLayoutEffects @ chunk-MX77MS2G.js?v=60adffb7:17948
commitRootImpl @ chunk-MX77MS2G.js?v=60adffb7:19381
commitRoot @ chunk-MX77MS2G.js?v=60adffb7:19305
finishConcurrentRender @ chunk-MX77MS2G.js?v=60adffb7:18788
performConcurrentWorkOnRoot @ chunk-MX77MS2G.js?v=60adffb7:18746
workLoop @ chunk-MX77MS2G.js?v=60adffb7:197
flushWork @ chunk-MX77MS2G.js?v=60adffb7:176
performWorkUntilDeadline @ chunk-MX77MS2G.js?v=60adffb7:384
Show 15 more frames
Show lessUnderstand this error
chunk-MX77MS2G.js?v=60adffb7:19441 Uncaught Error: No QueryClient set, use QueryClientProvider to set one
at useQueryClient (@tanstack_react-query-devtools.js?v=f301ccb8:262:11)
at ReactQueryDevtools (@tanstack_react-query-devtools.js?v=f301ccb8:430:23)
at renderWithHooks (chunk-MX77MS2G.js?v=60adffb7:11568:26)
at mountIndeterminateComponent (chunk-MX77MS2G.js?v=60adffb7:14946:21)
at beginWork (chunk-MX77MS2G.js?v=60adffb7:15934:22)
at beginWork$1 (chunk-MX77MS2G.js?v=60adffb7:19781:22)
at performUnitOfWork (chunk-MX77MS2G.js?v=60adffb7:19226:20)
at workLoopSync (chunk-MX77MS2G.js?v=60adffb7:19165:13)
at renderRootSync (chunk-MX77MS2G.js?v=60adffb7:19144:15)
at recoverFromConcurrentError (chunk-MX77MS2G.js?v=60adffb7:18764:28)
useQueryClient @ @tanstack_react-query-devtools.js?v=f301ccb8:262
ReactQueryDevtools @ @tanstack_react-query-devtools.js?v=f301ccb8:430
renderWithHooks @ chunk-MX77MS2G.js?v=60adffb7:11568
mountIndeterminateComponent @ chunk-MX77MS2G.js?v=60adffb7:14946
beginWork @ chunk-MX77MS2G.js?v=60adffb7:15934
beginWork$1 @ chunk-MX77MS2G.js?v=60adffb7:19781
performUnitOfWork @ chunk-MX77MS2G.js?v=60adffb7:19226
workLoopSync @ chunk-MX77MS2G.js?v=60adffb7:19165
renderRootSync @ chunk-MX77MS2G.js?v=60adffb7:19144
recoverFromConcurrentError @ chunk-MX77MS2G.js?v=60adffb7:18764
performConcurrentWorkOnRoot @ chunk-MX77MS2G.js?v=60adffb7:18712
workLoop @ chunk-MX77MS2G.js?v=60adffb7:197
flushWork @ chunk-MX77MS2G.js?v=60adffb7:176
performWorkUntilDeadline @ chunk-MX77MS2G.js?v=60adffb7:384
Show 14 more frames
Show lessUnderstand this error
6Third-party cookie will be blocked. Learn more in the Issues tab.Understand this warning