[react and Material-UI]: Appbar(NavBar) not picking material ui css - css

Question

I just want to create a simple Nav bar using Material-UI. but unfortunately, it's not working. The method mentioned in the docs, consist of a lot of extra code which I do not need. Wondering if it's possible to achieve the same without all that code.
these are the list of dependencies installed in 'package.json'
"dependencies": {
"#material-ui/core": "^3.9.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-redux": "^6.0.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"redux": "^4.0.1"
},
this is my navbar component
import React from 'react'
import { Link } from 'react-router-dom';
const Navbar = () => {
return(
<div>
<nav className="nav-wrapper">
<div className="container">
<Link to="/" className="brand-logo">Shopping</Link>
<ul className="right">
<li><Link to="/">Shop</Link></li>
<li><Link to="/cart">My cart</Link></li>
<li><Link to="/cart"><i className="material-icons">shopping_cart</i></Link></li>
</ul>
</div>
</nav>
</div>
)
}
export default Navbar;
and this is my 'App.js'
import React, { Component } from 'react';
import Navbar from './components/Navbar';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Home from './components/Home'
import Cart from './components/Cart'
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Navbar/>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/cart" component={Cart}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;