Fixed the issue by following these links:
"use client"
import { Amplify } from "aws-amplify"
import { cognitoUserPoolsTokenProvider } from "aws-amplify/auth/cognito"
import { sessionStorage } from "aws-amplify/utils"
import { Suspense } from "react"
import { Provider } from "react-redux"
import { store } from "@data/index"
import amplifyConfig from "@utils/amplifyConfig"
import RequireAuth from "@components/RequireAuth/RequireAuth"
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import theme from "./theme"
import {
extendTheme as materialExtendTheme,
ThemeProvider as MaterialThemeProvider,
THEME_ID as MATERIAL_THEME_ID,
} from '@mui/material/styles';
import { ThemeProvider as JoyThemeProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/material/CssBaseline';
Amplify.configure(amplifyConfig)
cognitoUserPoolsTokenProvider.setKeyValueStorage(sessionStorage)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<title>My Shitty App</title>
</head>
<body style={{ margin: 0, padding: 0 }}>
<AppRouterCacheProvider>
<MaterialThemeProvider theme={{ [MATERIAL_THEME_ID]: theme }}>
<JoyThemeProvider>
<CssBaseline enableColorScheme />
<Provider store={store}>
<Suspense>
<RequireAuth>
{children}
</RequireAuth>
</Suspense>
</Provider>
</JoyThemeProvider>
</MaterialThemeProvider>
</AppRouterCacheProvider>
</body>
</html>
)
}