diff --git a/frontend/src/models/groupsModel.ts b/frontend/src/models/groupsModel.ts
index 61f9f42e0cc3e..458f71e70e7c5 100644
--- a/frontend/src/models/groupsModel.ts
+++ b/frontend/src/models/groupsModel.ts
@@ -19,7 +19,7 @@ export const groupsModel = kea<groupsModelType>([
         values: [teamLogic, ['currentTeamId'], groupsAccessLogic, ['groupsEnabled', 'groupsAccessStatus']],
     }),
     loaders(({ values }) => ({
-        groupTypes: [
+        groupTypesRaw: [
             [] as Array<GroupType>,
             {
                 loadAllGroupTypes: async () => {
@@ -38,6 +38,20 @@ export const groupsModel = kea<groupsModelType>([
         ],
     })),
     selectors({
+        groupTypes: [
+            (s) => [s.groupTypesRaw],
+            (groupTypesRaw) => {
+                const groupTypes: GroupType[] = new Array(groupTypesRaw.length)
+
+                for (const groupType of groupTypesRaw) {
+                    groupTypes[groupType.group_type_index] = groupType
+                }
+
+                return groupTypes
+            },
+        ],
+        groupTypesLoading: [(s) => [s.groupTypesRawLoading], (groupTypesRawLoading) => groupTypesRawLoading],
+
         showGroupsOptions: [
             (s) => [s.groupsAccessStatus, s.groupsEnabled, s.groupTypes],
             (status, enabled, groupTypes) => status !== GroupsAccessStatus.Hidden || (enabled && groupTypes.length > 0),
@@ -66,6 +80,7 @@ export const groupsModel = kea<groupsModelType>([
                 (groupTypeIndex: number | null | undefined, deferToUserWording: boolean = false): Noun => {
                     if (groupTypeIndex != undefined && groupTypes.length > 0 && groupTypes[groupTypeIndex]) {
                         const groupType = groupTypes[groupTypeIndex]
+
                         return {
                             singular: groupType.name_plural || groupType.group_type,
                             plural: groupType.name_plural || `${groupType.group_type}(s)`,