text: import { useState } from "react";
  import { Provider as NextAuthProvider } from "next-auth/client";
  import { QueryClientProvider, QueryClient } from "react-query";
  import { Hydrate } from "react-query/hydration";
  import { ReactQueryDevtools } from "react-query/devtools";
  
  import Layout from "@/components/Layout/Layout";
  
  import "../styles/globals.css";
  
  function MyApp({ Component, pageProps }) {
  	const [queryClient] = useState(() => new QueryClient());
  
  	return (
  		<>
  			<QueryClientProvider client={queryClient}>
  				<Hydrate state={pageProps.dehydratedState}>
  					<NextAuthProvider session={pageProps.session}>
  						<Layout>
  							<Component {...pageProps} />
  						</Layout>
  					</NextAuthProvider>
  					<ReactQueryDevtools initialIsOpen={false} />
  				</Hydrate>
  			</QueryClientProvider>
  		</>
  	);
  }
  
  export default MyApp;
  