Side menu drawer is not showing up, instead screen is rendering blank - reactjs

Question

I am trying to create a side drawer only for one screen hence am using react-native-side-drawer as per the documentation in https://www.npmjs.com/package/react-native-side-drawer, however when I try to rerender it my screen is showing up blank as follows:
Below is my exact and complete code:
import React, {useEffect, useState} from 'react';
import {
View,
ScrollView,
ActivityIndicator,
Text,
TouchableOpacity,
StyleSheet,
Image,
} from 'react-native';
import MenuDrawer from 'react-native-side-drawer';
export default function HomeTabScreen(props) {
const {navigation} = props;
const [loading, setLoading] = useState(false);
// side drawer
const [open, setOpen] = useState(false);
useEffect(() => {
// console.log('useEffect - user', User);
// console.log('useEffect - mSChildId', mSChildId);
if (isValidObject(User) && isValidObject(mSChildId)) {
console.log('useEffect true');
console.log('useEffect true - user', User);
if (loadApi == true) {
getHomeTabMainAPI();
setLoadApi(false);
setSelectedChild(getChildFromUserChildrenList());
}
} else {
console.log('useEffect false');
if (!isValidObject(User) || !isValidObject(mSChildId)) {
console.log(
'!!!!!! Calling get user data !!!! Child Id ',
mSChildId,
' User Valid ',
isValidObject(User),
);
getUserData();
}
}
}, [User, mSChildId, loadApi]);
const toggleOpen = () => {
setOpen(!open);
};
const drawerContent = () => {
return (
<TouchableOpacity
style={{
marginLeft: '80%',
}}
onPress={() => logoutHandler()}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: '#000'}}>
Log out
</Text>
</TouchableOpacity>
);
};
return (
<SafeAreaView
style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
{loading ? (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<ActivityIndicator size="large" color="#FE017E" />
</View>
) : (
<ScrollView showsVerticalScrollIndicator={false}>
<View
style={{
flex: 1,
backgroundColor: '#fff',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}>
<MenuDrawer
open={open}
drawerContent={drawerContent()}
drawerPercentage={45}
animationTime={250}
overlay={true}
opacity={0.4}>
<View
style={{
backgroundColor: '#fff',
padding: 10,
justifyContent: 'space-between',
flexDirection: 'row',
}}>
<TouchableOpacity onPress={() => toggleOpen()}>
<Icon size={15} name="bars" />
</TouchableOpacity>
<TouchableOpacity
style={{
marginLeft: '80%',
}}
onPress={() => logoutHandler()}>
<Text
style={{fontSize: 15, fontWeight: 'bold', color: '#000'}}>
Log out
</Text>
</TouchableOpacity>
</View>
<View>
renders more stuff here.....that should show up on the screen
</View>
</MenuDrawer>
</View>
</ScrollView>
)}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
marginTop: 30,
zIndex: 0,
},
animatedBox: {
flex: 1,
backgroundColor: '#38C8EC',
padding: 10,
},
body: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F04812',
},
});
Any help would be appreciated, please let me know where I have gone wrong.
P.S: I am getting all the data on my console, but not on the screen