fix(breakout-rooms) make sure participants in breakout rooms have a display name

react/features/breakout-rooms/components/native/BreakoutRoomParticipantItem.js

 // @flow
 
 import React from 'react';
+import { useSelector } from 'react-redux';
 
 import { isParticipantModerator } from '../../../base/participants';
 import ParticipantItem from '../../../participants-pane/components/native/ParticipantItem';
      * Participant to be displayed.
      */
     item: Object
-}
+};
 
-const BreakoutRoomParticipantItem = ({ item }: Props) => (
-    <ParticipantItem
-        displayName = { item.displayName }
-        isKnockingParticipant = { false }
-        isModerator = { isParticipantModerator(item) }
-        key = { item.jid }
-        participantID = { item.jid } />
-);
+const BreakoutRoomParticipantItem = ({ item }: Props) => {
+    const { defaultRemoteDisplayName } = useSelector(state => state['features/base/config']);
+
+    return (
+        <ParticipantItem
+            displayName = { item.displayName || defaultRemoteDisplayName }
+            isKnockingParticipant = { false }
+            isModerator = { isParticipantModerator(item) }
+            key = { item.jid }
+            participantID = { item.jid } />
+    );
+};
 
 export default BreakoutRoomParticipantItem;

react/features/breakout-rooms/components/native/CollapsibleRoom.js

                 data = { Object.values(room.participants || {}) }
                 horizontal = { false }
                 keyExtractor = { _keyExtractor }
-                renderItem = { BreakoutRoomParticipantItem }
+                // eslint-disable-next-line react/jsx-no-bind
+                renderItem = { item => <BreakoutRoomParticipantItem item = { item } /> }
                 showsHorizontalScrollIndicator = { false }
                 windowSize = { 2 } />}
         </View>

react/features/breakout-rooms/components/web/CollapsibleRoom.js

 import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 import { ListItem } from '../../../base/components';
 import { Icon, IconArrowDown, IconArrowUp } from '../../../base/icons';
     const raiseMenu = useCallback(target => {
         onRaiseMenu(target);
     }, [ onRaiseMenu ]);
+    const { defaultRemoteDisplayName } = useSelector(state => state['features/base/config']);
 
     const arrow = (<div className = { styles.arrowContainer }>
         <Icon
             {!collapsed && room?.participants
                 && Object.values(room?.participants || {}).map((p: Object) => (
                     <ParticipantItem
-                        displayName = { p.displayName }
+                        displayName = { p.displayName || defaultRemoteDisplayName }
                         key = { p.jid }
                         local = { false }
                         participantID = { p.jid } />