TypeError: Cannot read properties of undefined (reading 'compat')

[s-pcode]

package versions used :
"@mui/lab": "^5.0.0-alpha.90",
"@mui/material": "^5.9.0",
"@mui/styles": "^5.9.0",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"next": "12.2.2",
"react": "17.0.2",
"react-dom": "17.0.2",

I don't know what is causing this error but I'm not able to see my pages whenever I start my server I get the above error message. I'm attaching a simple 404 page code from my codebase

import { motion } from "framer-motion";
import Link from "next/link";
// material
import { styled } from "@mui/material/styles";
import { Box, Button, Typography, Container } from "@mui/material";
// components
import { MotionContainer, varBounceIn } from "../src/components/animate";
import Page from "../src/components/Page";
import { PageNotFoundIllustration } from "../src/assets";

// ----------------------------------------------------------------------

const RootStyle = styled(Page)(({ theme }) => ({
  display: "flex",
  minHeight: "100%",
  alignItems: "center",
  paddingTop: theme.spacing(5),
  paddingBottom: theme.spacing(10),
}));

// ----------------------------------------------------------------------

export default function Page404() {
  return (
    <RootStyle title="404 Page Not Found | aarnâ">
      <Container>
        <MotionContainer initial="initial" open>
          <Box sx={{ maxWidth: 480, margin: "auto", textAlign: "center" }}>
            <motion.div variants={varBounceIn}>
              <Typography variant="h3" paragraph>
                sorry, page not found!
              </Typography>
            </motion.div>
            <Typography sx={{ color: "text.secondary" }}>
              sorry, we couldn't find the page you're looking for. perhaps
              you've mistyped the URL? be sure to check your spelling.
            </Typography>

            <motion.div variants={varBounceIn}>
              <PageNotFoundIllustration
                sx={{ height: 260, my: { xs: 5, sm: 10 } }}
              />
            </motion.div>

            <Link href="/">
              <Button
                size="large"
                variant="contained"
                sx={{ textTransform: "none" }}
              >
                go to home
              </Button>
            </Link>
          </Box>
        </MotionContainer>
      </Container>
    </RootStyle>
  );
}

Any feedback is much appreciated. Urgent help required as my production is down.

[s-pcode]

This was an issue from mui side and they have fixed this in v5.11.9. Please install the new version which works as expected with all NextJS versions. 👍