Add submenu on drawer react native - reactjs

Question

I am using below code to show a menu on react native. I need to show a submenu but I cannot figure out how.
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#cee1f2',
color: '#cee1f2',
itemStyle: {marginVertical: 5, color: 'white'},
labelStyle: {
color: '#d8d8d8',
},
}}
screenOptions={{headerShown: false}}
drawerContent={CustomSidebarMenu}>
<Drawer.Screen
name="homeScreenStack"
options={{drawerLabel: 'Home Screen'}}
component={homeScreenStack}
/>
<Drawer.Screen
name="settingScreenStack"
options={{drawerLabel: 'Setting Screen'}}
component={settingScreenStack}
/>
</Drawer.Navigator>
Here is Customesidebar code.
// Import React and Component
import React from 'react';
import {View, Text, Alert, StyleSheet} from 'react-native';
import {
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
import AsyncStorage from '#react-native-community/async-storage';
const CustomSidebarMenu = (props) => {
return (
<View style={stylesSidebar.sideMenuContainer}>
<View style={stylesSidebar.profileHeader}>
<View style={stylesSidebar.profileHeaderPicCircle}>
<Text style={{fontSize: 25, color: '#307ecc'}}>
{'DishUp'.charAt(0)}
</Text>
</View>
<Text style={stylesSidebar.profileHeaderText}>
DishUp
</Text>
</View>
<View style={stylesSidebar.profileHeaderLine} />
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
label={({color}) =>
<Text style={{color: '#d8d8d8'}}>
Logout
</Text>
}
onPress={() => {
props.navigation.toggleDrawer();
Alert.alert(
'Logout',
'Are you sure? You want to logout?',
[
{
text: 'Cancel',
onPress: () => {
return null;
},
},
{
text: 'Confirm',
onPress: () => {
AsyncStorage.clear();
props.navigation.replace('Auth');
},
},
],
{cancelable: false},
);
}}
/>
</DrawerContentScrollView>
</View>
);
};
export default CustomSidebarMenu;
const stylesSidebar = StyleSheet.create({
sideMenuContainer: {
width: '100%',
height: '100%',
backgroundColor: '#307ecc',
paddingTop: 40,
color: 'white',
},
profileHeader: {
flexDirection: 'row',
backgroundColor: '#307ecc',
padding: 15,
textAlign: 'center',
},
profileHeaderPicCircle: {
width: 60,
height: 60,
borderRadius: 60 / 2,
color: 'white',
backgroundColor: '#ffffff',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
},
profileHeaderText: {
color: 'white',
alignSelf: 'center',
paddingHorizontal: 10,
fontWeight: 'bold',
},
profileHeaderLine: {
height: 1,
marginHorizontal: 20,
backgroundColor: '#e2e2e2',
marginTop: 15,
},
});
Here is what it looks like right now. But I want to add a submenu inside Home and Screen. How can I achieve this?