Why material ui is not working? It is not rendering in the browser

I was following a project tutorial of Jan 30, 2022. I have installed material ui using ----legacy-peer-deps and same for icons. I am then trying to use AppBar and Typography but it is not showing on browser (I mean not rendering. Its completely blank there). How can I solve this issue? this is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This is App.js file:

import Header from "./components/Header";
function App() {
    return (
    <div>
        <Header/>
    </div>
    );
}

export default App;

this is Header.js:

import React from "react";
import { AppBar, Typography } from "@mui/material";
const Header = () => {
  return (
        <div>
            <AppBar >
        <Typography>E-Granthalaya</Typography>
        </AppBar>
        </div>
        


  );
};

export default Header;