diff --git a/src/Umbraco.Web.UI.Client/src/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.ts
index e0cf37273d21..7bdd24222dda 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.ts
@@ -111,11 +111,12 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 
 		if (!data) return;
 
-		const folders = Array.from(new Set(data.map((c) => '/' + c.folderPath.join('/'))));
-		this._compatibleCompositions = folders.map((path) => ({
-			path,
-			compositions: data.filter((c) => '/' + c.folderPath.join('/') === path),
-		}));
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		const grouped = Object.groupBy(data, (item) => '/' + item.folderPath.join('/'));
+		this._compatibleCompositions = Object.keys(grouped)
+			.sort((a, b) => a.localeCompare(b))
+			.map((key) => ({ path: key, compositions: grouped[key] }));
 	}
 
 	#onSelectionAdd(unique: string) {