I am trying to style my project with material UI and i am getting this unfamiliar error. I've tried restarting my project multiple times. To no avail.

This is the error from my console:

ERROR in ../../../../../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js 4:0-52
Module not found: Error: Can't resolve './nonIterableSpread' in '/Users/HP/node_modules/@babel/runtime/helpers/esm'
Did you mean 'nonIterableSpread.js'?
...

Navbar.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
  },
}));

function Navbar() {
  const classes = useStyles();
  return (
    <>
      <header className={classes.root}>
        <div className="title">
          <h1>Mba Okocha</h1>
        </div>
      </header>
    </>
  );
}

export default Navbar;