I am new to ReactJs and I am trying to implement TabContext using material UI library of react and I am getting the error above. I think it's due to path. I tried to install material UI again but it didn't help. I am sharing my code.Please check

my-app/src/App.js

import logo from './logo.svg';

import './App.css';

import Navbar from './Components/Navbar';

import Form from './Components/Form';





function App() {

  return (

    <div className="App">

      <h1>Hi</h1>

      <Navbar></Navbar>

    </div>

  );

}



export default App;

my-app/src/Components/Navbar.js

import React from 'react'

import { makeStyles } from '@material-ui/core/styles';

import AppBar from '@material-ui/core/AppBar';

import Tab from '@material-ui/core/Tab';

import {TabContext} from '@material-ui/lab/TabContext';

import {TabList} from '@material-ui/lab/TabList';

import {TabPanel} from '@material-ui/lab/TabPanel';





const useStyles = makeStyles((theme) => ({

  root: {

    flexGrow: 1,

    backgroundColor: theme.palette.background.paper,

  },

}));



function Navbar() {

    const classes = useStyles();

  const [value, setValue] = React.useState('1');



  const handleChange = (event, newValue) => {

    setValue(newValue);

  };



  return (

    <div className={classes.root}>

      <TabContext value={value}>

        <AppBar position="static">

          <TabList onChange={handleChange} aria-label="simple tabs example">

            <Tab label="Item One" value="1" />

            <Tab label="Item Two" value="2" />

            <Tab label="Item Three" value="3" />

          </TabList>

        </AppBar>

        <TabPanel value="1">Item One</TabPanel>

        <TabPanel value="2">Item Two</TabPanel>

        <TabPanel value="3">Item Three</TabPanel>

      </TabContext>

    </div>

  );

}



export default Navbar

package.json

{

  "name": "my-forms",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@material-ui/core": "^4.12.3",

    "@testing-library/jest-dom": "^5.14.1",

    "@testing-library/react": "^11.2.7",

    "@testing-library/user-event": "^12.8.3",

    "material-ui": "^0.20.2",

    "react": "^17.0.2",

    "react-dom": "^17.0.2",

    "react-scripts": "4.0.3",

    "web-vitals": "^1.1.2"

  },

  "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"

    ]

  }

}