My Material UI button is not showing up and making nothing show up in my web app

Question

I'm trying to use Material UI to use buttons in my web app using ReactJS for the frontend. I installed Material UI with the terminal command

npm install @material-ui/core

And my code looks like this:

import React from 'react';
import './Header.css';
import { Button } from '@material-ui/core';

function Header() {
  return (
    <div className="header">
      <div className="headerRight">
        <h1>Hi There</h1>
        <img
          className="headerIcon"
          src="https://upload.wikimedia.org/wikipedia/commons/a/a8/Bill_Gates_2017_%28cropped%29.jpg"
          alt=""
        />
        <div className="button">
          <Button>Click Me</Button>
        </div>
      </div>
    </div>
  );
}

export default Header;

and the compiler says "Compiled Successfully!" when I hit save, but when I look at the app in my browser, nothing is there at all. When I take out the button, everything else shows up, but when I put the button back in, nothing shows up, and I get a blank screen. I'm really frustrated trying to figure out why the Material UI button does not work. Please help me.

My App.js code looks like this

import './App.css';
import React from 'react';
import Header from './Header';
import Banner from './Banner';

function App() {
  return (
    <div className="App">
      <Header/>
      <Banner/>
    </div>
  );
}

export default App;