I am trying to create a portfolio website using Gatsby js and I am trying to use the card component from the gatsby-plugin-material-ui package. I have the card in a separate file in my components folder and I export it for use in my actual project page file. When I load up the website on localhost everything loads up fine except for when I hit the project button to navigate to the project page. Once I try to access the page I get this error

Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 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 Cards.

Here is the code where I create and export the component

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

and here is the code where I import the component to use for my project page

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;

I feel like its a problem with how I am exporting the component but I am not sure what it is, any help would be greatly appreciated :)