diff --git a/change/@fluentui-react-avatar-e3c57ed3-0a50-418f-bcc8-0ce6273ff0b2.json b/change/@fluentui-react-avatar-e3c57ed3-0a50-418f-bcc8-0ce6273ff0b2.json
new file mode 100644
index 00000000000000..ec198509da248e
--- /dev/null
+++ b/change/@fluentui-react-avatar-e3c57ed3-0a50-418f-bcc8-0ce6273ff0b2.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: Remove AvatarGroup and AvatarGroupItem warnings since they break the composition pattern and fixed issue when the children in AvatarGroup is a Fragment containing the AvatarGroupItems.",
+  "packageName": "@fluentui/react-avatar",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx
index 048a3eeffd8ab0..0ece6c95e745a4 100644
--- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx
+++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { AvatarGroupItem } from '../AvatarGroupItem/AvatarGroupItem';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 import { MoreHorizontalRegular } from '@fluentui/react-icons';
 import { PopoverSurface } from '@fluentui/react-popover';
@@ -17,15 +16,9 @@ import type { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';
 export const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<HTMLElement>): AvatarGroupState => {
   const { children, layout = 'spread', maxAvatars = 5, size = defaultAvatarGroupSize } = props;
   const { overflowIndicator = size < 24 ? 'icon' : 'count' } = props;
-  const childrenArray = React.Children.toArray(children);
-
-  if (
-    process.env.NODE_ENV !== 'production' &&
-    childrenArray.find(child => React.isValidElement(child) && child.type !== AvatarGroupItem)
-  ) {
-    // eslint-disable-next-line no-console
-    console.warn("AvatarGroup's children must be of type AvatarGroupItems.");
-  }
+  const childrenArray = React.Children.toArray(
+    React.isValidElement(children) && children.type === React.Fragment ? children.props.children : children,
+  );
 
   let rootChildren = childrenArray;
   let overflowChildren;
diff --git a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts
index 7c4c4121539877..5433de580d9b53 100644
--- a/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts
+++ b/packages/react-components/react-avatar/src/components/AvatarGroupItem/useAvatarGroupItem.ts
@@ -23,10 +23,10 @@ export const useAvatarGroupItem_unstable = (
   const groupIsOverflow = useContextSelector(AvatarGroupContext, ctx => ctx.isOverflow);
   const layout = useContextSelector(AvatarGroupContext, ctx => ctx.layout);
   const groupSize = useContextSelector(AvatarGroupContext, ctx => ctx.size);
+  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
   // Since the primary slot is not an intrinsic element, getPartitionedNativeProps cannot be used here.
   const { style, className, ...avatarSlotProps } = props;
   const size = groupSize ?? defaultAvatarGroupSize;
-  const hasAvatarGroupContext = useHasParentContext(AvatarGroupContext);
 
   if (process.env.NODE_ENV !== 'production' && !hasAvatarGroupContext) {
     // eslint-disable-next-line no-console