react-navigation nested drawer items

I’m trying to create nested menu in react native drawer. I can create the menu as below but I have to find a way to group items and put them into accordion. This is how I currently create the menu:

import React from 'react';
import PropTypes from 'prop-types';
import { SafeAreaView, ScrollView, StyleSheet,View } from 'react-native';
import { DrawerItems,createDrawerNavigator  } from 'react-navigation';
import { Container, Content, Text, List, ListItem } from "native-base";
import {Image,ImageBackground} from "react-native";
import logo from '../images/logofullwhite200.png';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20
  }
});

const DrawerComponent = props => {
  const skippedItems = Object.keys(props.drawerItems).filter(name => props.drawerItems[name].skip);
  return (
    <ScrollView style={styles.container}>
      <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
        <Content>
          <ImageBackground
            source={{
              uri: "https://raw.githubusercontent.com/GeekyAnts/NativeBase-KitchenSink/master/assets/drawer-cover.png"
            }}
            style={{
              height: 120,
              alignSelf: "stretch",
              justifyContent: "center",
              alignItems: "center"
            }}>
            <Image
              square
              style={{ height: 50, width: 150 }}
              source={logo}
            />
          </ImageBackground>
          <DrawerItems
            {...props}
            onItemPress={({ focused, route }) => {
              if (!skippedItems.includes(route.routeName)) {
                props.onItemPress({ focused, route });
              }
            }}
          />
        </Content>
      </SafeAreaView>
    </ScrollView>
  );
};

DrawerComponent.propTypes = {
  onItemPress: PropTypes.func,
  drawerItems: PropTypes.object
};

export default DrawerComponent;

this is the data example

"CreateSale": Object {
    "navigationOptions": Object {
      "drawerLabel": Object {
        "$$typeof": Symbol(react.element),
        "_owner": null,
        "_store": Object {},
        "key": null,
        "props": Object {
          "i18nKey": "sale.create_sale",
        },
        "ref": null,
        "type": [Function I18nextWithTranslation],
      },
    },
    "screen": [Function KeyboardAwareNavigator],
    "userInfo": Object {
      "showOnLogin": true,
    },
  },
  "Customer": Object {
    "navigationOptions": Object {
      "drawerLabel": Object {
        "$$typeof": Symbol(react.element),
        "_owner": null,
        "_store": Object {},
        "key": null,
        "props": Object {
          "i18nKey": "list.title",
        },
        "ref": null,
        "type": [Function I18nextWithTranslation],
      },
    },
    "screen": [Function KeyboardAwareNavigator],
    "userInfo": Object {
      "showOnLogin": true,
    },
  }

This is how index.tsx looks

export default new ClientModule({
  router: <MainScreenNavigator />,
  onAppCreate: [
    async (modules: ClientModule) =>
      (ref.navigator = createDrawerNavigator(
        {
          ...modules.drawerItems
        },
        {
          // eslint-disable-next-line
          contentComponent: props => <DrawerComponent {...props} drawerItems={modules.drawerItems} />
        }
      ))
  ]
});

I have to put the items in to accordion, they have to look nested such as as below:

Outlets

• Customers
• Customer

yarn add react-native-collapsible

import Collapsible from 'react-native-collapsible';

() => (
  <Collapsible collapsed={isCollapsed}>
    <SomeCollapsedView />
  </Collapsible>
);