diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js
index f1f13f593535..c494920d567f 100644
--- a/examples/angular-cli/.storybook/main.js
+++ b/examples/angular-cli/.storybook/main.js
@@ -19,4 +19,19 @@ module.exports = {
   angularOptions: {
     enableIvy: true,
   },
+  // These are just here to test composition. They could be added to any storybook example project
+  refs: {
+    first: {
+      title: 'Composition test one',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+    second: {
+      title: 'Composition test two',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+    third: {
+      title: 'Composition test three',
+      url: 'https://storybookjs.netlify.app/cra-ts-essentials',
+    },
+  },
 };
diff --git a/lib/api/src/modules/refs.ts b/lib/api/src/modules/refs.ts
index 80d54adc2a7b..12d11de96fad 100644
--- a/lib/api/src/modules/refs.ts
+++ b/lib/api/src/modules/refs.ts
@@ -228,8 +228,15 @@ export const init: ModuleFn = ({ store, provider, singleStory }, { runCheck = tr
 
       updated[id] = { ...ref, ...data };
 
+      /* eslint-disable no-param-reassign */
+      const ordered = Object.keys(initialState).reduce((obj: any, key) => {
+        obj[key] = updated[key];
+        return obj;
+      }, {});
+      /* eslint-enable no-param-reassign */
+
       store.setState({
-        refs: updated,
+        refs: ordered,
       });
     },
   };