I am getting this error above but I am passing props to the component; I can't figure out what's the issue here. I have been using React for a while but I was using classes, and I wanted to try using function components too. They should be technically the same however as far as I understand, just that you don't need to use this.props and you can just access props.

I am using the components on the 'Socials' page, using the Routing method below: (I get this error on "/", where the component isn't supposed to load. I'm not sure if this is causing the error, because I have not encountered this type of issue.)

        <div className = "appBody">
    <Router basename={process.env.PUBLIC_URL}>
      <Routes>
        <Route path="/" element={Home} exact/>
        <Route path="" element={Home} exact/>
        <Route path="/About" element={Home}/>
        <Route path="/Games" element={Home} />
        <Route path="/Software" element={Home} />
        <Route path="/Art" element={Home} />
        <Route path="/Writing" element={Home} />
        <Route path="/Socials" element={Socials} />
      </Routes>
    </Router>
    </div>

Here is the component I am using:

    const SocialCard = (props) => {

    console.log(props.title);

  return (
    <Card sx={{ minWidth: 275 }}>
      <CardContent>
        {/*Add icon here later*/}
        <Typography sx={{ fontSize: 16 }} color="text.secondary" gutterBottom>
          {props.title}
        </Typography>
        <Typography variant="h5" component="div">
          {props.handle}
        </Typography>
      </CardContent>
      {props.hasLink == true &&  
      <CardActions>
        <Button size="small" onClick = {() => openURL(props.url)}>View</Button>
      </CardActions>}
    </Card>
  );
}

export default SocialCard();

Here I have passed the props to the component as an example.

 <Grid item xs={5}>
        <SocialCard title = {'email'} handle = {'example@gmail.com'} hasLink = {false}/>
      </Grid>
 <Grid item xs={5}>