MSAL Error: You may need an appropriate loader to handle this file type

Question

I am trying to configure Azure MSAL from scratch. This is new React app with v16. But i am getting error. I have tried to download the Azure MSAL React example project it is working on React v18.

Getting error in file: "./node_modules/@azure/msal-react/dist/msal-react.esm.js"

Error:

    Module parse failed: Unexpected token (135:13)
You may need an appropriate loader to handle this file type.
|   if (newInProgress !== previousState.inProgress && !accountArraysAreEqual(currentAccounts, previousState.accounts)) {
|     // Both inProgress and accounts changed
|     return { ...previousState,
|       inProgress: newInProgress,
|       accounts: currentAccounts

Working with:

Package.json:

{
  "name": "msal-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@azure/msal-browser": "^2.34.0",
    "@azure/msal-react": "^1.5.4",
    "react": "^16.12.0",
    "react-dom": "16.12",
    "react-scripts": "^1.1.5",
    "web-vitals": "^3.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.21.3",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^9.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "file-loader": "^6.2.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.76.2",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.12.0"
  }
}

.babelrc

{
    "presets": [
        "@babel/preset-typescript",
        [
            "@babel/preset-env",
            {
                "modules": "commonjs"
            }
        ]
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

I am not able to understand loader is required in dependency or can i configure any thing to solve this.

Note: Working in React 18 and giving this error in react 16