function AvatarGroup(props) {
    const { size, className, style, avatars, maxAvatars, showCounter } = props;

    return (
        <StyledContainer className={className} style={style} size={size}>
            <RenderIf isTrue={showCounter}>
                <Counter size={size} avatars={avatars} maxAvatars={maxAvatars} />
            </RenderIf>
            <Avatars
                size={size}
                avatars={avatars}
                showCounter={showCounter}
                maxAvatars={maxAvatars}
            />
        </StyledContainer>
    );
}
An AvatarGroup is an element that communicates to the user
 that there are many entities associated to an item.