I just started leanring REACT and am following this youtube tutorial. I copied some code for an Appbar from material-ui's website but I'm getting these errors and I'm not sure how to fix them (I basically followed the youtube video exactly, and the guy in the video didn't get any errors).

This is my App.js file:

import './App.css';
import AppBar from './AppBar';

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

export default App;

And this is my AppBar.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>
  );
}

And these are the errors from chrome (the code does compile in vs code tho).

Does anyone know why this is happening and how to fix it? Thank you!