Breakout rooms banner fix for react 17 and lower (#5358)

* Fix BreakoutRoomsBanner component to return null instead of undefined when there is no breakout room state

* Change files

Author: mgamis-msft

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"
+}

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"
+}

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