diff --git a/lib/ui/src/components/sidebar/mockdata.ts b/lib/ui/src/components/sidebar/mockdata.ts
index b9884d91ac4..0f62f1f9a9a 100644
--- a/lib/ui/src/components/sidebar/mockdata.ts
+++ b/lib/ui/src/components/sidebar/mockdata.ts
@@ -4,65 +4,65 @@ export type MockDataSet = Record<string, StoriesHash>;
 
 export const mockDataset: MockDataSet = {
   withRoot: {
-    '2': {
+    'group-1': {
       type: 'group',
-      children: ['2-21', '2-22'],
+      children: ['group-1--child-b1', 'group-1--child-b2'],
       depth: 0,
-      id: '2',
+      id: 'group-1',
       name: 'Group 1',
     },
-    '2-21': {
+    'group-1--child-b1': {
       type: 'story',
       prepared: true,
-      id: '2-21',
+      id: 'group-1--child-b1',
       depth: 1,
       name: 'Child B1',
-      parent: '2',
+      parent: 'group-1',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '2-22': {
+    'group-1--child-b2': {
       type: 'story',
       prepared: true,
-      id: '2-22',
+      id: 'group-1--child-b2',
       depth: 1,
       name: 'Child B2',
-      parent: '2',
+      parent: 'group-1',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '1': {
+    'root-1': {
       type: 'root',
-      children: ['1-11', '1-12'],
+      children: ['root-1-child-a1', 'root-1-child-a2'],
       depth: 0,
-      id: '1',
+      id: 'root-1',
       name: 'Root 1',
     },
-    '1-11': {
+    'root-1-child-a1': {
       type: 'component',
-      id: '1-11',
-      parent: '1',
+      id: 'root-1-child-a1',
+      parent: 'root-1',
       depth: 1,
       name: 'Child A1',
       children: [],
     },
-    '1-12': {
+    'root-1-child-a2': {
       type: 'component',
-      id: '1-12',
-      parent: '1',
+      id: 'root-1-child-a2',
+      parent: 'root-1',
       name: 'Child A2',
       depth: 1,
-      children: ['1-12-121', '1-12-122'],
+      children: ['root-1-child-a2--grandchild-a1-1', 'root-1-child-a2--grandchild-a1-2'],
     },
-    '1-12-121': {
+    'root-1-child-a2--grandchild-a1-1': {
       type: 'story',
       prepared: true,
-      id: '1-12-121',
-      parent: '1-12',
+      id: 'root-1-child-a2--grandchild-a1-1',
+      parent: 'root-1-child-a2',
       depth: 2,
       name: 'GrandChild A1.1',
       title: '',
@@ -70,11 +70,11 @@ export const mockDataset: MockDataSet = {
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '1-12-122': {
+    'root-1-child-a2--grandchild-a1-2': {
       type: 'story',
       prepared: true,
-      id: '1-12-122',
-      parent: '1-12',
+      id: 'root-1-child-a2--grandchild-a1-2',
+      parent: 'root-1-child-a2',
       depth: 2,
       name: 'GrandChild A1.2',
       title: '',
@@ -82,52 +82,52 @@ export const mockDataset: MockDataSet = {
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '3': {
+    'root-3': {
       type: 'root',
-      children: ['3-31', '3-32'],
+      children: ['root-3--child-a1', 'root-3-child-a2'],
       depth: 0,
-      id: '3',
+      id: 'root-3',
       name: 'Root 3',
     },
-    '3-31': {
+    'root-3--child-a1': {
       type: 'story',
       prepared: true,
-      id: '3-31',
+      id: 'root-3--child-a1',
       depth: 1,
       name: 'Child A1',
-      parent: '3',
+      parent: 'root-3',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '3-32': {
+    'root-3-child-a2': {
       type: 'component',
-      id: '3-32',
+      id: 'root-3-child-a2',
       name: 'Child A2',
       depth: 1,
-      children: ['3-32-321', '3-32-322'],
-      parent: '3',
+      children: ['root-3-child-a2--grandchild-a1-1', 'root-3-child-a2--grandchild-a1-2'],
+      parent: 'root-3',
     },
-    '3-32-321': {
+    'root-3-child-a2--grandchild-a1-1': {
       type: 'story',
       prepared: true,
-      id: '3-32-321',
+      id: 'root-3-child-a2--grandchild-a1-1',
       depth: 2,
       name: 'GrandChild A1.1',
-      parent: '3-32',
+      parent: 'root-3-child-a2',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '3-32-322': {
+    'root-3-child-a2--grandchild-a1-2': {
       type: 'story',
       prepared: true,
-      id: '3-32-322',
+      id: 'root-3-child-a2--grandchild-a1-2',
       depth: 2,
       name: 'GrandChild A1.2',
-      parent: '3-32',
+      parent: 'root-3-child-a2',
       title: '',
       args: {},
       initialArgs: {},
@@ -135,83 +135,83 @@ export const mockDataset: MockDataSet = {
     },
   },
   noRoot: {
-    '1': {
-      children: ['1-11', '1-12'],
+    'root-1': {
+      children: ['root-1-child-a1', 'root-1-child-a2'],
       type: 'group',
       depth: 0,
-      id: '1',
+      id: 'root-1',
       name: 'Parent A',
     },
-    '2': {
-      children: ['2-21', '2-22'],
+    'group-1': {
+      children: ['group-1--child-b1', 'group-1--child-b2'],
       type: 'component',
       depth: 0,
-      id: '2',
+      id: 'group-1',
       name: 'Parent B',
     },
-    '1-11': {
-      id: '1-11',
+    'root-1-child-a1': {
+      id: 'root-1-child-a1',
       depth: 1,
       name: 'Child A1',
       type: 'story',
       prepared: true,
-      parent: '1',
+      parent: 'root-1',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '1-12-121': {
-      id: '1-12-121',
+    'root-1-child-a2--grandchild-a1-1': {
+      id: 'root-1-child-a2--grandchild-a1-1',
       depth: 2,
       name: 'GrandChild A1.1',
       type: 'story',
       prepared: true,
-      parent: '1-12',
+      parent: 'root-1-child-a2',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '1-12-122': {
-      id: '1-12-122',
+    'root-1-child-a2--grandchild-a1-2': {
+      id: 'root-1-child-a2--grandchild-a1-2',
       depth: 2,
       name: 'GrandChild A1.2',
       type: 'story',
       prepared: true,
-      parent: '1-12',
+      parent: 'root-1-child-a2',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '1-12': {
-      id: '1-12',
+    'root-1-child-a2': {
+      id: 'root-1-child-a2',
       name: 'Child A2',
       depth: 1,
-      children: ['1-12-121', '1-12-122'],
+      children: ['root-1-child-a2--grandchild-a1-1', 'root-1-child-a2--grandchild-a1-2'],
       type: 'component',
-      parent: '1',
+      parent: 'root-1',
     },
-    '2-21': {
-      id: '2-21',
+    'group-1--child-b1': {
+      id: 'group-1--child-b1',
       depth: 1,
       name: 'Child B1',
       type: 'story',
       prepared: true,
-      parent: '2',
+      parent: 'group-1',
       title: '',
       args: {},
       initialArgs: {},
       importPath: './importPath.js',
     },
-    '2-22': {
-      id: '2-22',
+    'group-1--child-b2': {
+      id: 'group-1--child-b2',
       depth: 1,
       name: 'Child B2',
       type: 'story',
       prepared: true,
-      parent: '2',
+      parent: 'group-1',
       title: '',
       args: {},
       initialArgs: {},
@@ -222,66 +222,66 @@ export const mockDataset: MockDataSet = {
 
 export const mockSelected = {
   withRoot: {
-    '1': false,
-    '2': false,
-    '1-11': false,
-    '1-12-121': false,
-    '1-12-122': false,
-    '1-12': false,
-    '2-21': false,
-    '2-22': false,
-    '3': false,
-    '3-31': false,
-    '3-32': false,
-    '3-32-321': false,
-    '3-32-322': false,
+    'root-1': false,
+    'group-1': false,
+    'root-1-child-a1': false,
+    'root-1-child-a2--grandchild-a1-1': false,
+    'root-1-child-a2--grandchild-a1-2': false,
+    'root-1-child-a2': false,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
+    'root-3': false,
+    'root-3--child-a1': false,
+    'root-3-child-a2': false,
+    'root-3-child-a2--grandchild-a1-1': false,
+    'root-3-child-a2--grandchild-a1-2': false,
   },
   noRoot: {
-    '1': false,
-    '2': false,
-    '1-11': false,
-    '1-12-121': false,
-    '1-12-122': false,
-    '1-12': false,
-    '2-21': false,
-    '2-22': false,
+    'root-1': false,
+    'group-1': false,
+    'root-1-child-a1': false,
+    'root-1-child-a2--grandchild-a1-1': false,
+    'root-1-child-a2--grandchild-a1-2': false,
+    'root-1-child-a2': false,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
   },
 };
 
 export const mockExpanded = {
   withRoot: {
-    '1': true,
-    '2': false,
-    '1-11': true,
-    '1-12-121': false,
-    '1-12-122': false,
-    '1-12': false,
-    '2-21': false,
-    '2-22': false,
-    '3': false,
-    '3-31': false,
-    '3-32': false,
-    '3-32-321': false,
-    '3-32-322': false,
+    'root-1': true,
+    'group-1': false,
+    'root-1-child-a1': true,
+    'root-1-child-a2--grandchild-a1-1': false,
+    'root-1-child-a2--grandchild-a1-2': false,
+    'root-1-child-a2': false,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
+    'root-3': false,
+    'root-3--child-a1': false,
+    'root-3-child-a2': false,
+    'root-3-child-a2--grandchild-a1-1': false,
+    'root-3-child-a2--grandchild-a1-2': false,
   },
   noRoot: {
-    '1': true,
-    '2': false,
-    '1-11': true,
-    '1-12-121': false,
-    '1-12-122': false,
-    '1-12': false,
-    '2-21': false,
-    '2-22': false,
+    'root-1': true,
+    'group-1': false,
+    'root-1-child-a1': true,
+    'root-1-child-a2--grandchild-a1-1': false,
+    'root-1-child-a2--grandchild-a1-2': false,
+    'root-1-child-a2': false,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
   },
   noRootSecond: {
-    '1': true,
-    '2': false,
-    '1-11': true,
-    '1-12-121': true,
-    '1-12-122': true,
-    '1-12': true,
-    '2-21': false,
-    '2-22': false,
+    'root-1': true,
+    'group-1': false,
+    'root-1-child-a1': true,
+    'root-1-child-a2--grandchild-a1-1': true,
+    'root-1-child-a2--grandchild-a1-2': true,
+    'root-1-child-a2': true,
+    'group-1--child-b1': false,
+    'group-1--child-b2': false,
   },
 };