Initializing QueryClient in a top level component using useState instead of Global Variable

const AllProviders = ({ children }: { children: ReactNode }) => {
    const logoutUser = useSetAtom(logoutUserAtom);
    const [queryClient] = useState(
        new QueryClient({
            queryCache: new QueryCache({
                onError: (error) => {
                    if (error.session_expired) {
                        logoutUser();
                    }
                    toast.error(errorMessage, { toastId: errorMessage });
                },
            }),
        }),
    );

    return (
        <QueryClientProvider client={queryClient}>
            <StyledEngineProvider injectFirst>
                <ThemeProvider theme={rootTheme}>
                    <AuthProvider>{children}</AuthProvider>
                </ThemeProvider>
            </StyledEngineProvider>
            <ReactQueryDevtools initialIsOpen={false} />
        </QueryClientProvider>
    );
};