React-script and Webpack version 5 migration error: "You may need an appropriate loader to handle this file type"

Question

I am upgrading react-script from v4 to v5. By doing this internally it upgrades webpack from v4 to v5 after this I am getting below error by this command "node --trace-deprecation node_modules/webpack/bin/webpack.js"

Module parse failed: Unexpected token (7:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const container = document.getElementById('root');
| const root = createRoot(container);
> root.render(<MyApp />);

devDependencies inside package.json

"devDependencies": {
    "@babel/cli": "^7.14.5",
    "@babel/core": "^7.14.6",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@cfaester/enzyme-adapter-react-18": "^0.7.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "babel-plugin-transform-remove-imports": "^1.7.0",
    "canvas": "^2.7.0",
    "cross-env": "7.0.3",
    "css-loader": "^4.3.0",
    "cypress": "^13.3.0",
    "enzyme": "^3.11.0",
    "eslint-plugin-cypress": "^2.13.3",
    "graphqlviz": "^4.0.1",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.4",
    "mini-css-extract-plugin": "^1.6.2",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "^4.3.0",
    "prettier": "^2.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-overlay": "^6.0.9",
    "react-scripts": "5.0.1",
    "sass": "^1.54.4",
    "sass-loader": "^10.1.1",
    "snyk": "^1.639.0",
    "stylelint": "^15.10.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^34.0.0",
    "stylelint-config-standard-scss": "^10.0.0",
    "stylelint-order": "^6.0.3",
    "stylelint-prettier": "^1.2.0",
    "webpack-cli": "^5.1.4",
    "workerize-loader": "^1.3.0"
  }

.babelrc

{
  "plugins": [
    "@babel/plugin-transform-runtime",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
    ["@babel/plugin-proposal-private-methods", { "loose": true }]
  ],
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "env": {
    "lib": {
      "plugins": [
        "@babel/plugin-transform-runtime",
        ["@babel/plugin-proposal-class-properties", { "loose": true }],
        [
          "@babel/plugin-proposal-private-property-in-object",
          { "loose": true }
        ],
        ["@babel/plugin-proposal-private-methods", { "loose": true }],
        ["babel-plugin-transform-remove-imports", { "test": "\\.(scss)$" }]
      ],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  }
}

Note: my app is not ejected and hence I don't have webpack.config.js file

I tried updating some devDependencies like @babel/cli also updated webpack-cli to latest but still can't get rid of above error.