Sub menu in drawer - React Native - react-native

Question

Hi I am new to React native. I have developed all the screens along with navigations. In Drawer, i have a menu named Reports. If i click that, i want to show 2 sub menus, Old Report and New Report. I have customised the drawer menu for styling.
My React native version is 0.62.
I am using React Navigation(https://reactnavigation.org/) library for navigation.
Below is the attachment of my drawer menu screenshot. Kindly share you ideas.
<View style={{flex:1}}>
<DrawerContentScrollView {...props}>
<View style={styles.drawerContent}>
<View style={styles.userInfoSection}>
<View style={{flexDirection:'row'}}>
<Avatar.Image
source={require('../Assets/user.png')}
/>
<View style={{marginHorizontal:10, justifyContent:'center', width:'70%'}}>
<Text style={{color:'gray'}}>k******#gmail.com</Text>
</View>
</View>
</View>
<View style={{alignItems:'center', marginVertical:15}}>
<View
style={{borderBottomColor:'gray',borderWidth:0.5, width:'90%'}}
/>
</View>
<View>
<DrawerItem
icon={({color, size}) => (
<Icon
name="md-home"
size={size}
color={Colors.primary}
/>
)}
label="Home"
onPress={() => props.navigation.navigate('Home')}
/>
<DrawerItem
icon={({color, size}) => (
<Icon
name='ios-document'
size={size}
color={Colors.primary}
/>
)}
label='Report'
onPress={() => props.navigation.navigate('Report')}
/>
<DrawerItem
icon={({color, size}) => (
<Icon
name="ios-notifications"
size={size}
color={Colors.primary}
/>
)}
label='Notifications'
onPress={() => props.navigation.navigate('Notification')}
/>
</View>
</View>
</DrawerContentScrollView>
<Drawer.Section>
<DrawerItem
icon={({color, size}) => (
<Icon
name="ios-exit"
color="red"
size={size}
/>
)}
label="SignOut"
onPress={ () => signOut()}
/>
</Drawer.Section>
</View>