Estoy tratando de crear un sitio web de cartera usando Gatsby js y estoy tratando de usar el componente de tarjeta del paquete gatsby-plugin-material-ui. Tengo la tarjeta en un archivo separado en mi carpeta de componentes y la exporto para usarla en mi archivo de página de proyecto real. Cuando cargo el sitio web en localhost, todo se carga bien, excepto cuando presiono el botón del proyecto para navegar a la página del proyecto. Una vez que trato de acceder a la página me sale este error

Error en la función createFiberFromTypeAndProps en ./node_modules/react-dom/cjs/react-dom.development.js:25058

El tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre. Compruebe el método de renderizado de las Cards .

Aquí está el código donde creo y exporto el componente.

 import * as React from "react" import Card from 'gatsby-plugin-material-ui'; import CardContent from 'gatsby-plugin-material-ui'; import CardMedia from 'gatsby-plugin-material-ui'; import Typography from 'gatsby-plugin-material-ui'; import { CardActionArea } from 'gatsby-plugin-material-ui' const Cards = () => { return ( <div className="cardsTest"> <Card sx={{ maxWidth: 345 }}> <CardActionArea> <CardMedia component="img" height="140" image="../images/space.jpg" alt="Gagan Toronto" /> <CardContent> <Typography gutterBottom variant="h5" component="div"> Space Card </Typography> <Typography variant="body2" color="text.secondary"> This is just a placeholder card </Typography> </CardContent> </CardActionArea> </Card> </div> ) } export default Cards

y aquí está el código donde importo el componente para usar en la página de mi proyecto

 import * as React from "react" //components used across site import Header from "../components/header" import Cards from "../components/Cards" const ProjectPage = () => ( <div> <Header /> <Cards /> </div> ) export default ProjectPage;

Siento que es un problema con la forma en que estoy exportando el componente, pero no estoy seguro de qué es, cualquier ayuda sería muy apreciada :)