Acabo de empezar a aprender REACT y estoy siguiendo este tutorial de youtube. Copié un código para una barra de aplicaciones del sitio web de material-ui, pero recibo estos errores y no estoy seguro de cómo solucionarlos (básicamente seguí el video de YouTube exactamente, y el tipo en el video no recibió ningún error) ).

Este es mi archivo App.js :

 import './App.css'; import AppBar from './AppBar'; function App() { return ( <div className="App"> <AppBar/> </div> ); } export default App;

Y esta es mi 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> ); }

Y estos son los errores de Chrome (aunque el código se compila en vs code).

¿Alguien sabe por qué sucede esto y cómo solucionarlo? ¡Gracias!