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.

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>
      );
    }