Custom TabBarIcon hidden under DrawerNavigator - React Navigation v5 - react-native

Question

I am having this issue where a custom made TabBarIcon is not showing fully. I have read the docs, github to try and find a solution for this.
What I could make out was that nesting a BottomTabsNavigator in a DrawerNavigator might have repercussions, please correct me if I'm wrong.
This is how my Navigation Container would look like
AppNavigator
Authenticated ? DrawerNavigator : AuthNavigator
// Inside DrawerNavigator:
DrawerNavigator
BottomTabsNavigator
Rest of the screens
An image for illustration of my problem:
AppNavigator.js:
// AppNav uses StackNavigation
<NavigationContainer>
<Navigator headerMode='none'>
{authenticated && !isLoading ? (
<Screen name='DrawerNavigator' component={DrawerNavigator} />
) : !authenticated && !isLoading ? (
<Screen name='AuthNavigator' component={AuthNavigator} />
) : (
<Screen name='Loading' component={LoadingScreen} />
)}
</Navigator>
</NavigationContainer>
DrawerNavigator.js:
// I am using a UI library, UI kitten for the Drawer. But I don't think this is the cause
const { Navigator, Screen } = createDrawerNavigator();
const DrawerNavigator = () => (
<Navigator
drawerContent={props => <DrawerContent {...props} />}
initialRouteName='BottomTabsNavigator'
>
<Screen name='BottomTabsNavigator' component={BottomTabsNavigator} />
<Screen name='ChangePassword' component={ChangePasswordScreen} />
<Screen name='AuthNavigator' component={AuthNavigator} />
<Screen name='UserProfile' component={UserProfileScreen} />
<Screen name='EditProfile' component={EditProfileScreen} />
<Screen name='ActivityFeed' component={ActivityFeedScreen} />
</Navigator>
);
BottomTabsNavigator.js:
const BottomTabs = createBottomTabNavigator();
const BottomTabsNavigator = ({ navigation }) => {
return (
<BottomTabs.Navigator
tabBarOptions={{
showLabel: false,
activeTintColor: '#407BFF'
}}
initialRouteName='Home'
>
<BottomTabs.Screen
name='Home'
component={MainAppScreen}
options={{
tabBarIcon: Some Icon
}}
/>
<BottomTabs.Screen
name='TeamUp'
component={TeamUpScreen}
options={{
tabBarIcon: () => <TeamUpBottomTab navigation={navigation} /> // Custom made 'Icon'
}}
/>
<BottomTabs.Screen
name='ChatOverview'
component={ChatOverviewScreen}
options={{
tabBarIcon: Some Icon
}}
/>
</BottomTabs.Navigator>
);
};
The custom made Icon is as such:
import { Platform, Pressable, StyleSheet, Animated, Image } from 'react-native';
<Pressable onPress={pressHandler} style={styles.teamUp}>
<Animated.View style={[{ transform: [{ scale: animatedScale }] }]}>
<Image
style={styles.logo}
source={require('../../assets/images/orbital-logo.png')}
/>
</Animated.View>
</Pressable>
Been stuck for a few days, and searching for a solution isn't helping much.
Appreciate any help, thank you