diff --git a/src/libs/GroupChatUtils.ts b/src/libs/GroupChatUtils.ts
index ba14bc9c9c3d..26b3665ca4ce 100644
--- a/src/libs/GroupChatUtils.ts
+++ b/src/libs/GroupChatUtils.ts
@@ -1,26 +1,18 @@
-import type {OnyxEntry} from 'react-native-onyx';
-import Onyx from 'react-native-onyx';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type {PersonalDetailsList, Report} from '@src/types/onyx';
-import * as OptionsListUtils from './OptionsListUtils';
+import type {Report} from '@src/types/onyx';
 import * as ReportUtils from './ReportUtils';
 
-let allPersonalDetails: OnyxEntry<PersonalDetailsList> = {};
-Onyx.connect({
-    key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    callback: (val) => (allPersonalDetails = val),
-});
-
 /**
  * Returns the report name if the report is a group chat
  */
 function getGroupChatName(report: Report): string | undefined {
     const participants = report.participantAccountIDs ?? [];
     const isMultipleParticipantReport = participants.length > 1;
-    const participantPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, allPersonalDetails ?? {});
-    // @ts-expect-error Error will gone when OptionsListUtils will be migrated to Typescript
-    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(participantPersonalDetails, isMultipleParticipantReport);
-    return ReportUtils.getDisplayNamesStringFromTooltips(displayNamesWithTooltips);
+
+    return participants
+        .map((participant) => ReportUtils.getDisplayNameForParticipant(participant, isMultipleParticipantReport))
+        .sort((first, second) => first?.localeCompare(second ?? '') ?? 0)
+        .filter(Boolean)
+        .join(', ');
 }
 
 export {
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
index 0d7658adf180..8019951155c4 100644
--- a/src/libs/ReportUtils.ts
+++ b/src/libs/ReportUtils.ts
@@ -1488,7 +1488,6 @@ function getDisplayNameForParticipant(accountID?: number, shouldUseShortForm = f
     }
 
     const personalDetails = getPersonalDetailsForAccountID(accountID);
-    // console.log(personalDetails);
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const formattedLogin = LocalePhoneNumber.formatPhoneNumber(personalDetails.login || '');
     // This is to check if account is an invite/optimistically created one
@@ -1550,17 +1549,6 @@ function getDisplayNamesWithTooltips(
         });
 }
 
-/**
- * Gets a joined string of display names from the list of display name with tooltip objects.
- *
- */
-function getDisplayNamesStringFromTooltips(displayNamesWithTooltips: DisplayNameWithTooltips | undefined) {
-    return displayNamesWithTooltips
-        ?.map(({displayName}) => displayName)
-        .filter(Boolean)
-        .join(', ');
-}
-
 /**
  * For a deleted parent report action within a chat report,
  * let us return the appropriate display message
@@ -4406,7 +4394,6 @@ export {
     getIcons,
     getRoomWelcomeMessage,
     getDisplayNamesWithTooltips,
-    getDisplayNamesStringFromTooltips,
     getReportName,
     getReport,
     getReportNotificationPreference,
diff --git a/src/libs/actions/PersonalDetails.ts b/src/libs/actions/PersonalDetails.ts
index 0e1662da4d55..508cca34fb88 100644
--- a/src/libs/actions/PersonalDetails.ts
+++ b/src/libs/actions/PersonalDetails.ts
@@ -43,20 +43,19 @@ Onyx.connect({
 });
 
 /**
- * Returns the displayName for a user
+ * Creates a new displayName for a user based on passed personal details or login.
  */
-function getDisplayName(login: string, personalDetail: Pick<PersonalDetails, 'firstName' | 'lastName'> | null): string {
+function createDisplayName(login: string, personalDetails: Pick<PersonalDetails, 'firstName' | 'lastName'> | OnyxEntry<PersonalDetails>): string {
     // If we have a number like +15857527441@expensify.sms then let's remove @expensify.sms and format it
     // so that the option looks cleaner in our UI.
     const userLogin = LocalePhoneNumber.formatPhoneNumber(login);
-    const userDetails = personalDetail ?? allPersonalDetails?.[login];
 
-    if (!userDetails) {
+    if (!personalDetails) {
         return userLogin;
     }
 
-    const firstName = userDetails.firstName ?? '';
-    const lastName = userDetails.lastName ?? '';
+    const firstName = personalDetails.firstName ?? '';
+    const lastName = personalDetails.lastName ?? '';
     const fullName = `${firstName} ${lastName}`.trim();
 
     // It's possible for fullName to be empty string, so we must use "||" to fallback to userLogin.
@@ -150,7 +149,7 @@ function updateDisplayName(firstName: string, lastName: string) {
                         [currentUserAccountID]: {
                             firstName,
                             lastName,
-                            displayName: getDisplayName(currentUserEmail ?? '', {
+                            displayName: createDisplayName(currentUserEmail ?? '', {
                                 firstName,
                                 lastName,
                             }),
@@ -566,7 +565,7 @@ export {
     deleteAvatar,
     extractFirstAndLastNameFromAvailableDetails,
     getCountryISO,
-    getDisplayName,
+    createDisplayName,
     getPrivatePersonalDetails,
     openPersonalDetailsPage,
     openPublicProfilePage,
diff --git a/src/libs/actions/User.ts b/src/libs/actions/User.ts
index 8da451f9d64d..8e3bd5f2c017 100644
--- a/src/libs/actions/User.ts
+++ b/src/libs/actions/User.ts
@@ -717,7 +717,7 @@ function setContactMethodAsDefault(newDefaultContactMethod: string) {
             value: {
                 [currentUserAccountID]: {
                     login: newDefaultContactMethod,
-                    displayName: PersonalDetails.getDisplayName(newDefaultContactMethod, myPersonalDetails),
+                    displayName: PersonalDetails.createDisplayName(newDefaultContactMethod, myPersonalDetails),
                 },
             },
         },