[material-ui][AvatarGroup] Even with null results the avatar is still counted

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

• Use the AvatarGroup component and loop an array of avatars inside.
• Don't directly do the condition inside the AvatarGroup, instead, render a child component and pass the current avatar data.
• On the Child component, create a condition to either render the avatar or return null instead, so that the avatar won't be rendered.

Here is the Live Demo: SANDBOX-MATERIALUI-AVATAR-GROUP

Current behavior 😯

In some cases, I need to do the condition inside the child component to either render the avatar or not after fetching some data by using a hook which needs to be on the top level.

However, returning null to not render the avatar is still being counted by the avatargroup causing it to still render the + icon.

Expected behavior 🤔

Do not count the null avatars that are being returned so that the + icon will not be rendered.

Context 🔦

This makes the component look a bit buggy a it renders the + icon even without avatars. I'm not sure if this is a limitation in which we should not do it this way or if there is another approach we should be doing instead. Thank you!

Your environment 🌎

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Start with the AvatarGroup implementation and the linked CodeSandbox demo at demo.tsx:57,44; inspect how child components that return null are counted. Done means null-rendering children are excluded from the count so the + indicator is absent when no visible avatars remain, with the behavior verified against the reproduction.