Estoy haciendo una barra de aplicaciones con material-ui y recibo en la consola al menos 3 veces el mismo error

 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Barra`. at createFiberFromTypeAndProps (react-dom.development.js:25053) at createFiberFromElement (react-dom.development.js:25081) at reconcileSingleElement (react-dom.development.js:14052) at reconcileChildFibers (react-dom.development.js:14112) at reconcileChildren (react-dom.development.js:16990) at updateHostComponent (react-dom.development.js:17632) at beginWork (react-dom.development.js:19080) at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056)``` The AppBar code is very simple,that's why I'm so confused with it : import React from 'react' import {AppBar,ToolBar,Typography} from '@material-ui/core' import {makeStyles} from '@material-ui/core/styles' const useStyles=makeStyles({ titulo:{ background:'linear-gradient(45deg,#5BD452,#204F24)', border:0, borderRadius:15, color:'white' } }) const Barra =()=>{ const estilos=useStyles() return( <AppBar> <ToolBar> <Typography className={estilos.titulo}> Jacaranda </Typography> </ToolBar> </AppBar> ) } export default Barra

Tengo una idea porque estoy tratando de hacer un cambio en la estructura de mi código cambiando dónde estaría el enrutador, pero creo que eso no tiene ningún sentido.