Strange background color appears where nesting Bottom Tabs Navigator with a Stack Navigator - React Native

I have the following Bottom Tabs Navigator code with its options and style and also its 3 screens

  const Tab = createBottomTabNavigator();
  
  <Tab.Navigator
    tabBar={props => (
      <View
        style={{
          backgroundColor: 'transparent',
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
        }}>
        <BottomTabBar {...props} />
      </View>
    )}
    screenOptions={{
      headerShown: false,
      tabBarHideOnKeyboard: true,
      tabBarStyle: {
        position: 'relative',
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf: 'center',
        elevation: 0,
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        bottom: 0,
        height: 55,
        backgroundColor: theme.colors.secondaryContainer,
      },
      tabBarLabelStyle: {
        fontFamily: 'RobotoCondensed-Regular',
        fontSize: 16,
        marginBottom: 10,
      },
      tabBarIconStyle: {
        marginTop: 0,
      },
      tabBarActiveTintColor: theme.colors.error,
      tabBarInactiveTintColor: theme.colors.secondary,
    }}
    sceneContainerStyle={{
      backgroundColor: 'transparent',
      paddingBottom: 70,
    }}
    initialRouteName="SealScreen"
    detachInactiveScreens={false}>
    <Tab.Screen
      options={{
        tabBarShowLabel: false,
        tabBarLabel: 'Seal',
        tabBarIcon: ({color, size}) => (
          <MaterialCommunityIcons name="seal" color={color} size={size} />
        ),
      }}
      name="SealScreen"
      component={SealScreen}
    />
    <Tab.Screen
      options={{
        tabBarShowLabel: false,
        tabBarLabel: 'Slot',
        tabBarIcon: ({color, size}) => (
          <MaterialCommunityIcons
            name="slot-machine"
            color={color}
            size={size}
          />
        ),
      }}
      name="SlotScreen"
      component={SlotScreen}
    />
    <Tab.Screen
      options={{
        tabBarShowLabel: false,
        tabBarLabel: 'Info',
        tabBarIcon: ({color, size}) => (
          <MaterialCommunityIcons
            name="information"
            color={color}
            size={size}
          />
        ),
      }}
      name="InfoScreen"
      component={InfoStackNavigator}
    />
  </Tab.Navigator>

Last screen in Bottom Tabs Navigator is the following Stack Navigator component

  const InfoStackNavigator = () => {
    return (
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="P1" component={PP1} />
        <Stack.Screen name="P2" component={PP2} />
      </Stack.Navigator>
    );
  };

When running on emulator (Android), I see the following behaviour:

If I click the info button (last in screenshot) corresponding to the Stack Navigator, a strange background appears behind the bottom tabs navigator

However, If I click a button in bottom tabs where a default component is assigned to the Tab.Screen the background dissapears

I enabled the element inspector in the emulator, also enabled debug (used react native debugger) and doing so I could clic the strange background until I found out that the problem was this style set to the Tab.Navigator ...

sceneContainerStyle={{  
    backgroundColor: '#ff0000',  
    paddingBottom: 70,  
}}  

Removed this sceneContainerStyle completely and the strange background is gone!