diff --git a/change-beta/@azure-communication-react-3770976d-8796-497c-b460-2f38b8b95e39.json b/change-beta/@azure-communication-react-3770976d-8796-497c-b460-2f38b8b95e39.json
new file mode 100644
index 00000000000..e428c87466d
--- /dev/null
+++ b/change-beta/@azure-communication-react-3770976d-8796-497c-b460-2f38b8b95e39.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Breakout rooms",
+  "comment": "Fix BreakoutRoomsBanner component to return null instead of undefined when there is no breakout room state",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-3770976d-8796-497c-b460-2f38b8b95e39.json b/change/@azure-communication-react-3770976d-8796-497c-b460-2f38b8b95e39.json
new file mode 100644
index 00000000000..e428c87466d
--- /dev/null
+++ b/change/@azure-communication-react-3770976d-8796-497c-b460-2f38b8b95e39.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Breakout rooms",
+  "comment": "Fix BreakoutRoomsBanner component to return null instead of undefined when there is no breakout room state",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.tsx b/packages/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.tsx
index 5f1037f39bf..6f02eaec7bc 100644
--- a/packages/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.tsx
+++ b/packages/react-composites/src/composites/CallComposite/components/BreakoutRoomsBanner.tsx
@@ -25,7 +25,7 @@ import { Banner } from './Banner';
 export const BreakoutRoomsBanner = (props: {
   locale: CompositeLocale;
   adapter: CommonCallAdapter;
-}): JSX.Element | undefined => {
+}): JSX.Element | null => {
   const { locale, adapter } = props;
 
   const assignedBreakoutRoom = useSelector(getAssignedBreakoutRoom);
@@ -61,5 +61,5 @@ export const BreakoutRoomsBanner = (props: {
       </Stack>
     );
   }
-  return undefined;
+  return null;
 };