sub menu in sub menu

Hey, I want to create sub menu in sub menu in sidebar. First sub menu is visible in sidebar , but I don't see the second one. I can only see 'Tasks' which is an abstract state. Through the urls I can navigate to task1 and task2. Am I missing something here?

function routeConfig($stateProvider) {
$stateProvider
.state('epic', {
url: '/epic',
abstract: true,
title: 'New on-boarding journey',
template: '',
sidebarMeta: {
icon: 'ion-compose',
order: 100,
},
})
.state('epic.description', {
url: '/description',
templateUrl: 'app/pages/epic/epic.html',
title: 'Output',
sidebarMeta: {
order: 200,
},
})
.state('epic.tasks', {
url: '/tasks',
abstract: true,
title: 'Tasks',
template: '',
sidebarMeta: {
icon: 'ion-compose',
order: 300,
},
})
.state('epic.tasks.task', {
url: '/task1',
title: 'Sign In / Registration',
templateUrl: 'app/pages/epic/tasks/task1/task1.html',
sidebarMeta: {
icon: 'ion-compose',
order: 300,
},
})
.state('epic.tasks.task2', {
url: '/tasks2',
title: 'Task2',
templateUrl: 'app/pages/epic/tasks/task2/task2.html',
sidebarMeta: {
icon: 'ion-compose',
order: 400,
},
});
}