title: React unable to read props.title (undefined) despite passing props as usual
body: <p><a href="https://i.stack.imgur.com/UvxZJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UvxZJ.png" alt="Error 1" /></a></p>
  <p>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.</p>
  <p>I am using the components on the 'Socials' page, using the Routing method below: (I get this error on &quot;/&quot;, 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.)</p>
  <pre><code>        &lt;div className = &quot;appBody&quot;&gt;
      &lt;Router basename={process.env.PUBLIC_URL}&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={Home} exact/&gt;
          &lt;Route path=&quot;&quot; element={Home} exact/&gt;
          &lt;Route path=&quot;/About&quot; element={Home}/&gt;
          &lt;Route path=&quot;/Games&quot; element={Home} /&gt;
          &lt;Route path=&quot;/Software&quot; element={Home} /&gt;
          &lt;Route path=&quot;/Art&quot; element={Home} /&gt;
          &lt;Route path=&quot;/Writing&quot; element={Home} /&gt;
          &lt;Route path=&quot;/Socials&quot; element={Socials} /&gt;
        &lt;/Routes&gt;
      &lt;/Router&gt;
      &lt;/div&gt;
  </code></pre>
  <p>Here is the component I am using:</p>
  <pre><code>    const SocialCard = (props) =&gt; {
  
      console.log(props.title);
  
    return (
      &lt;Card sx={{ minWidth: 275 }}&gt;
        &lt;CardContent&gt;
          {/*Add icon here later*/}
          &lt;Typography sx={{ fontSize: 16 }} color=&quot;text.secondary&quot; gutterBottom&gt;
            {props.title}
          &lt;/Typography&gt;
          &lt;Typography variant=&quot;h5&quot; component=&quot;div&quot;&gt;
            {props.handle}
          &lt;/Typography&gt;
        &lt;/CardContent&gt;
        {props.hasLink == true &amp;&amp;  
        &lt;CardActions&gt;
          &lt;Button size=&quot;small&quot; onClick = {() =&gt; openURL(props.url)}&gt;View&lt;/Button&gt;
        &lt;/CardActions&gt;}
      &lt;/Card&gt;
    );
  }
  
  export default SocialCard();
  </code></pre>
  <p>Here I have passed the props to the component as an example.</p>
  <pre><code> &lt;Grid item xs={5}&gt;
          &lt;SocialCard title = {'email'} handle = {'example@gmail.com'} hasLink = {false}/&gt;
        &lt;/Grid&gt;
   &lt;Grid item xs={5}&gt;
  </code></pre>