react-navigation bottom tabs: change color of container BEHIND tabContainer

Question

I am building a bottom tab navigator with react-navigation (react-native). As you can see in the screen shot i have a borderTopLeftRadius & borderTopRightRadius being applied to my Tab container via tabBarOptions.tabStyle but behind the tab bar itself is a grey background so it's not clear that my tab bar container is in fact curved.

Is there a way to change the background of the container containing my tab bar ?

function RootNavigator() {
  return (
    <NavigationContainer linking={deeplinkConfig} fallback={<Loading />}>
      <Stack.Navigator initialRouteName={routeConfig.mainApp}>
        <Stack.Screen name={routeConfig.mainApp} component={AppNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const Tab = createBottomTabNavigator();
export function CustomTabNavigator({tabBarOptions = {}, ...props}) {
  return (
    <Tab.Navigator
      {...props}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
        labelStyle: [styles.labelStyle],
        tabStyle: [styles.tabContainer],
        style: [styles.tabBarContainer],
        ...tabBarOptions,
      }}
    />
  );
}
export const CustomTabScreen = Tab.Screen;

const styles = StyleSheet.create({
  tabBarContainer: {
    backgroundColor: '#f4f4f4',
    marginBottom: 15,
    borderWidth: 1,
    borderBottomWidth: 0,
    borderColor: '#D5D5D5',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  tabContainer: {
    height: 55
  },
  labelStyle: {
    fontSize: 12,
  }
});