I'm trying to create 10 Avatars in a row to display the user list. But, when I pass the JSON to check those, I get the Avatar duplicated and misrepresenting the Avatar initials. And I've tried this in Code Sandbox that I've attached below.
https://codesandbox.io/s/optimistic-cookies-ygvso?file=/src/App.js
export default function App() {
return (
<div>
<div>
<Typography variant="h5">Persons</Typography>
</div>
<Stack direction="row" spacing={2}>
{PersonData.map((person) => {
return (
<div>
<Avatar {...stringAvatar(person.avatar)} />
<Typography>{person.name}</Typography>
</div>
);
})}
</Stack>
</div>
);
}