updated emotion compiler import map to fix nested component ref not handled issue

next.config.js

@@ -23,6 +23,27 @@ const IS_SENTRY_ENABLED = getIsSentryEnabled();
 module.exports = (phase) =>
     withSentryConfig(
         withBundleAnalyzer({
+            compiler: {
+                emotion: {
+                    importMap: {
+                        '@mui/material': {
+                            styled: {
+                                canonicalImport: ['@emotion/styled', 'default'],
+                                styledBaseImport: ['@mui/material', 'styled'],
+                            },
+                        },
+                        '@mui/material/styles': {
+                            styled: {
+                                canonicalImport: ['@emotion/styled', 'default'],
+                                styledBaseImport: [
+                                    '@mui/material/styles',
+                                    'styled',
+                                ],
+                            },
+                        },
+                    },
+                },
+            },
             transpilePackages: [
                 '@mui/material',
                 '@mui/system',

tsconfig.json

@@ -23,6 +23,6 @@
         "jsxImportSource": "@emotion/react",
         "incremental": true
     },
-    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],
     "exclude": ["node_modules", "out", ".next", "thirdparty"]
 }