title: React component with re usable avatar
body: <p>I'm new to React and have hit a roadblock. Basically, I'm trying to create a simple reusable component. I am using MUI and want to create an avatar component to be called anywhere with a different image for when it is called. I want to be able to call in an argument when declaring the  component in various pages. Please help</p>
  <pre><code>import * as React from 'react';
  import Avatar from '@mui/material/Avatar';
  import Stack from '@mui/material/Stack';
  import frankieAvatar from '/Users/rodriguezmedia/Desktop/react-counter-app/src/images/oink.png';
  import { AvatarGroup } from '@mui/material';
  
  const designerOne = {
      src: frankieAvatar
  }
  
  export default function AvatarDesigners() {
      return (
          &lt;Avatar src={designerOne.src}&gt;&lt;/Avatar&gt;
      );
  }
  </code></pre>