React app renders blank page when introducing Material UI component

Question

I am using create-react-app and Material UI to develop a web app. I am trying to use MUI's Basic App Bar as a header/nav element but when I create it as a component in my app and try to use it in my App.js file it breaks the page, rendering either a blank page or the background color and nothing else. I have other MUI components rendering appropriately but when I try to add this custom component from the MUI example code it breaks the page. I can add standard HTML code into the same component file and it will render appropriately, so it's clearly an issue with how I'm using the MUI component.

Relevant directory structure:

-- src/
  -- Components/
    -- App/
      -- App.css
      -- App.js
      -- App.test.js
    -- ButtonAppBar.js
  -- index.css
  -- index.js
  -- theme.js

App.js

import React from 'react';
import logo from './../../logo.svg';
import './App.css';
import Container from '@material-ui/core/Container';
import Typography from '@material-ui/core/Typography';
import { Button, Paper } from '@material-ui/core';
import ButtonAppBar from '../ButtonAppBar'
function App() {
  return (
    <Container maxWidth="xl" className="App">
      <Paper>
        <ButtonAppBar />
        <img src={logo} className="App-logo" alt="logo" />
        <Typography variant="h4" component="h1" gutterBottom>
          Energy Infrastructure API
        </Typography>
        <Typography variant='subtitle2' component='subtitle2' gutterBottom>
          Documentation for the Energy Infrastructure API, from the Center for Research-based Decision Making on Climate and Energy Policy
        </Typography>
        <br></br>
        <Button variant="contained" color="secondary">
          Twitter
        </Button>
        <Button variant="contained" color="secondary">
          Github
        </Button>
        <Button variant="contained" color="primary">
          Get Started
        </Button>
      </Paper>
    </Container>
  );
}
export default App;

ButtonAppBar.js

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

export default function ButtonAppBar() {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import App from './Components/App/App';
import theme from './theme';
// import * as serviceWorker from './serviceWorker';
ReactDOM.render(
  <ThemeProvider theme={theme}>
    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
    <CssBaseline />
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
);