Custom TabBarIcon hidden under DrawerNavigator

Current Behavior

I have tried searching on issues here, StackOverflow and other articles but can't seem to find a solution. Initially, I suspected it could be because of the styling of the custom-made TarBarIcon component but much reading later I found out it's because of how my BottomTabsNavigator is nested inside DrawerNavigator. I tried vice versa but it gave me weird behaviours.

Navigation flow:

AppNavigator
  Authenticated ? DrawerNavigator : AuthNavigator
  
// Inside DrawerNavigator:
DrawerNavigator
  BottomTabsNavigator
  Rest of the screens

Expected Behavior

• What do you expect should be happening?
  The custom-made TabBarIcon should be completely visible.

How to reproduce

For easier viewing, this is the repo link (i.e. ./navigation, ./screens/Auth

AppNavigator (main file i.e. NavigationContainer)

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

// 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

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 Icon:

import { Pressable, 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>

Your Environment

Start with the linked reproduction repository's frontend/src/navigation and Auth files, then inspect how the DrawerNavigator and BottomTabsNavigator are nested. Confirm the cause of the hidden custom tab icon and document or implement a fix that makes the icon completely visible without breaking navigation behavior.