“You may need an additional loader to handle the result of these loaders” – issues with babel config potentially

Currently working with @mui/x-charts and keep getting the same error no matter what I try. I was trying to work with Chart.js and was getting errors to.

./node_modules/@mui/base/Popper/Popper.js 151:27
Module parse failed: Unexpected token (151:27)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   }
|   const classes = useUtilityClasses();
>   const Root = slots.root ?? 'div';
|   const rootProps = useSlotProps({
|     elementType: Root,

NPM version 10.2.4

React 18.3.1

and here is my package.json

{
  "name": "website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/x-charts": "^6.18.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.7.7",
    "chart.js": "^4.4.4",
    "firebase": "^10.13.1",
    "materialize-css": "^1.0.0-rc.2",
    "moment": "^2.30.1",
    "pako": "^2.1.0",
    "react": "^18.3.1",
    "react-big-calendar": "^1.15.0",
    "react-calendar": "^5.0.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.3.1",
    "react-plaid-link": "^3.6.0",
    "react-router-dom": "^6.26.2",
    "react-script": "^2.0.5",
    "react-scripts": "^3.4.4",
    "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": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/compat-data": "7.19.4",
    "@babel/core": "^7.19.6",
    "@babel/generator": "7.19.6",
    "@babel/helper-compilation-targets": "7.19.3",
    "@babel/helper-create-class-features-plugin": "7.19.0",
    "@babel/helper-module-transforms": "7.19.6",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-transform-private-property-in-object": "^7.24.7",
    "@babel/preset-env": "^7.26.0",
    "@babel/preset-react": "^7.25.9",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.2.1"
  }
}

Already tried upgrading my webpack version but got an error saying to downgrade.