As a novice in React, I've encountered a challenge. My goal is to develop a simple reusable component using MUI. Specifically, I aim to create an avatar component that can be easily customized with different images when called upon. I want the flexibility to pass arguments when declaring this component on various pages. Can someone please provide guidance?
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 (
<Avatar src={designerOne.src}></Avatar>
);
}