You May Need an Appropriate Loader to Handle This File Type. React & Material Ui

I have set up a project using Material UI and React JS. Without adding anything to my App. I am getting a strange error, which I don't know why. I have tried creating an issue on MUI but it was unanswered.

App is created using npx-create-react-app

This is the error that I get:

/node_modules/@mui/system/colorManipulator.js Unexpected token (231:67)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (231:67)
@ ./~/@mui/system/index.js 467:24-53

I have tried deleting my package-lock.json and node_modules and reinstalling the packages using npm I, but I still get the same error.

This is my package.json:

{
"name": "hirecinch-billing-portal",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@mui/icons-material": "^5.6.1",
"@mui/material": "^5.6.1",
"@mui/styled-engine-sc": "^5.6.1",
"@mui/system": "^5.6.1",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^0.9.5",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"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"
  ]
} 

}

This is my App.js:

import React from 'react';
import { styled } from '@mui/system';  
import './App.css';
import Header from './Components/Header'

function App() {
 return (
   <div className="App">
      <Header />
   </div>
 );
}

export default App;

If I remove import { styled } from '@mui/system'; error is gone.