Error Module parse failed: Unexpected token (357:30)

Question

I was working on this project on saturday i stopped and went home now today i.e monday i started this project and it started showing me error and i do not understand what is the error for

    ./node_modules/@material-ui/core/esm/Tabs/Tabs.js 357:30
Module parse failed: Unexpected token (357:30)
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.
|   }, [updateIndicatorState, updateScrollButtonState]);
|   var handleTabsScroll = React.useCallback(debounce(function () {
>     updateScrollButtonState();|n  }));
|   React.useEffect(function () {
|     return function () {

it is a simple form nothing much

import { Grid, IconButton, TextField } from "@material-ui/core";
import { ArrowBack, AttachMoney, ChevronLeft } from "@material-ui/icons";
import React from "react";
import "../../css/userTableForm.css";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  input1: {
    height: 50,
  },
  input2: {
    height: 200,
    fontSize: "3em",
  },
}));
function UserTableForm() {
  const classes = useStyles();

  return (
    <div>
      <div className="conetent">
        <div className="container-fluid">
          <div className="row d-flex align-items-center">
            <div className="col-4">
              <IconButton>
                <ArrowBack />
              </IconButton>
              <span className="fw-light" style={{ fontSize: "30px" }}>
                Form Product
              </span>
            </div>
          </div>
          <div className="card">
            <div className="card-body d-flex">
              <Grid container spacing={1} alignItems="flex-end">
                <Grid item>
                  <TextField
                     className={classes.input2}
                    id="input-with-icon-grid"
                    label="Name"
                    InputProps={{ classes: { input: classes.input1 } }}
                  />
                </Grid>
              </Grid>
              <Grid container spacing={1} alignItems="flex-end">
                <Grid item>
                  <AttachMoney />
                </Grid>
                <Grid item>
                  <TextField
                    className="widd"
                    id="input-with-icon-grid"
                    label="Price"
                  />
                </Grid>
              </Grid>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default UserTableForm;

here is the package.json file

{
  "name": "whats-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "react-router-dom": "^5.2.0",
    "bootstrap": "^5.1.0",
    "@material-ui/data-grid": "^4.0.0-alpha.35",
    "@material-ui/x-grid": "^4.0.0-alpha.35"
  },
  "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"
    ]
  }
}

it was working fine until i used the makestyles from material ui it started giving me error and even after removing the makestyles it still gives error