no need to pass in ChannelModel. already have the channelId. just add

the displayName as a prop

app/components/channel_actions/add_people_box/add_people_box.tsx

@@ -8,22 +8,20 @@ import {StyleProp, ViewStyle} from 'react-native';
 import OptionBox from '@components/option_box';
 import {Screens} from '@constants';
 import {useTheme} from '@context/theme';
-import {ChannelModel} from '@database/models/server';
 import {dismissBottomSheet, goToScreen, showModal} from '@screens/navigation';
 import {changeOpacity} from '@utils/theme';
 
 type Props = {
-    channel: ChannelModel;
+    channelId: string;
     containerStyle?: StyleProp<ViewStyle>;
+    displayName: string;
     inModal?: boolean;
     testID?: string;
 }
 
-const AddPeopleBox = ({channel, containerStyle, inModal, testID}: Props) => {
+const AddPeopleBox = ({channelId, containerStyle, displayName, inModal, testID}: Props) => {
     const intl = useIntl();
     const theme = useTheme();
-    const channelId = channel.id;
-    const displayName = channel.displayName;
 
     const onAddPeople = useCallback(async () => {
         const title = intl.formatMessage({id: 'mobile.channel_add_people.title', defaultMessage: 'Add Members'});

app/components/channel_actions/add_people_box/index.tsx

@@ -3,6 +3,8 @@
 
 import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
+import {of as of$} from 'rxjs';
+import {switchMap} from 'rxjs/operators';
 
 import {observeChannel} from '@queries/servers/channel';
 
@@ -15,8 +17,11 @@ type Props = WithDatabaseArgs & {
 }
 
 const enhanced = withObservables(['channelId'], ({channelId, database}: Props) => {
+    const channel = observeChannel(database, channelId);
+    const displayName = channel.pipe(switchMap((c) => of$(c?.displayName)));
+
     return {
-        channel: observeChannel(database, channelId),
+        displayName,
     };
 });