Error: You are trying to create a styled element with an undefined component

Question

I am trying to migrate my existing project from CRA (Create React App) to Vite. I am facing an issue: 'Error: You are trying to create a styled element with an undefined component. You may have forgotten to import it.'. My intention for this migration is for SSR (Server-Side Rendering). Can you anyone please help?

Error

here is my vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
    tsconfigPaths(),
    svgrPlugin(),
  ],
});

this is my tsconfig.json file

{
 "compilerOptions": {
   "target": "ES2020",
   "useDefineForClassFields": true,
   "lib": ["ES2020", "DOM", "DOM.Iterable"],
   "module": "ESNext",
   "skipLibCheck": true,
   "jsxImportSource": "@emotion/react",

   /* Bundler mode */
   "moduleResolution": "bundler",
   "allowImportingTsExtensions": true,
   "resolveJsonModule": true,
   "isolatedModules": true,
   "noEmit": true,
   "jsx": "react-jsx",

   /* Linting */
   "strict": true,
   "noUnusedLocals": true,
   "noUnusedParameters": true,
   "noFallthroughCasesInSwitch": true,
   "baseUrl": "./src"
 },
 "include": ["src"],

 "references": [{ "path": "./tsconfig.node.json" }]
}

and tsconfig.node.json

{
 "compilerOptions": {
   "composite": true,
   "skipLibCheck": true,
   "module": "ESNext",
   "moduleResolution": "bundler",
   "allowSyntheticDefaultImports": true,
   "jsx": "preserve"
 },
 "include": ["vite.config.ts", "src/entry-server.tsx", "src/vite-env.d.ts"]
}

it should work as expected but not working