upgrading react version and changing dls to filament

Question

I am in the middle of upgrading the react version from 16 to 18. now after upgrading successfully i changed to filament dls. Filament uses Vanilla Extract to generate static CSS files for Application and its theme configuration.

so, I added all the necessary dependencies including Vanilla and Vite.

Don't know much about them and eager to learn.

this is my package.json

{
  "homepage": "./",
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@filament-icons/react": "^1.10.0",
    "@filament/next-plugin": "^3.1.10",
    "@filament/react": "^3.12.3",
    "@filament/vite-plugin": "^3.3.9",
    "@mui/icons-material": "^6.4.4",
    "@mui/lab": "^6.0.0-beta.27",
    "@mui/material": "^6.4.4",
    "@mui/x-date-pickers": "^7.26.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.5.0",
    "date-fns": "^2.30.0",
    "html-react-parser": "^5.2.2",
    "jquery": "^3.5.1",
    "lodash": "^4.17.19",
    "nprogress": "^0.2.0",
    "react": "18.3.0",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "18.3.0",
    "react-inlinesvg": "^4.1.8",
    "react-intl": "^5.6.9",
    "react-redux": "^7.2.0",
    "react-redux-i18n": "^1.9.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.1",
    "react-select": "5.10.0",
    "react-table": "^7.8.0",
    "reactstrap": "^8.5.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "spm": "file:",
    "styled-components": "^5.3.3"
  },
  "scripts": {
    "npm:login": "npm login --registry=https://artifactory-ehv.ta.philips.com/artifactory/api/npm/edi-dmis-pb-npm/",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "coverage": "react-scripts test --env=jsdom --watchAll=false --coverage",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
  

    "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    
    "redux-mock-store": "^1.5.4",
    "vite-plugin-vanilla-extract": "^0.0.0"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|pdf)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "coveragePathIgnorePatterns": [
      "<rootDir>/src/api/resource.js",
      "<rootDir>/src/i18n/",
      "<rootDir>/src/assets/",
      "<rootDir>/public/",
      "<rootDir>/src/serviceWorker.js",
      "<rootDir>/src/app.settings.js",
      "<rootDir>/src/index.js"
    ]
  },
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

this is the error in the browser:-

any response will be a huge help. thank you in advance.