screenOption not working for Custom navigators

Question

I'm new on React Native and I'm trying to create custom navigator. but screenOption is not working ,

Here's my current code:

import React from 'react';
import {View, Text, Image} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createMyNavigator} from './TabNavigator';
import {HomeScreen, OverviewScreen, ResultScreen, FeedScreen} from '../Screens';

const My = createMyNavigator();
// screens
function Route1() {
  return (
    <NavigationContainer>
      <My.Navigator
        initialRouteName="Home"
        screenOptions={{
          tabBarActiveTintColor: '#08a870',
          tabBarLabelStyle: {fontSize: 16, fontWeight: 'bold'},
          tabBarIndicatorStyle: {
            borderWidth: 2,
            borderColor: '#08a870',
          },
        }}>
        <My.Screen name="Home" component={HomeScreen} />
        <My.Screen name="Feed" component={FeedScreen} />
        <My.Screen name="Overview" component={OverviewScreen} />
        <My.Screen name="Result" component={ResultScreen} />
      </My.Navigator>
    </NavigationContainer>
  );
}

export default Route1;

my custom navigator code :-

import * as React from 'react';
import {Text, Pressable, View, StyleSheet} from 'react-native';
import {
  useNavigationBuilder,
  TabRouter,
  TabActions,
  createNavigatorFactory,
} from '@react-navigation/native';

export function TabNavigator({
  initialRouteName,
  children,
  screenOptions,
  tabBarStyle,
  contentStyle,
}) {
  const {state, navigation, descriptors, NavigationContent} =
    useNavigationBuilder(TabRouter, {
      children,
      screenOptions,
      initialRouteName,
    });
    console.log(children);


  // console.log('NavigationContent',NavigationContent);
  return (
    <NavigationContent>



      <View
        style={[
          {
            flexDirection: 'row',
            justifyContent: 'space-around',
            paddingTop: 20,
          },
          tabBarStyle,
        ]}>
        {state.routes.map((route, index) => {
          const isFocused = state.index === index;
          return (
            <Pressable
              key={route.key}
              onPress={() => {
                const event = navigation.emit({
                  type: 'tabPress',
                  target: route.key,
                  canPreventDefault: true,
                });

                if (!event.defaultPrevented) {
                  navigation.dispatch({
                    ...TabActions.jumpTo(route.name),
                    target: state.key,
                  });
                }
              }}
              style={[{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                alignContent: 'center',
                backgroundColor: isFocused ? 'tomato' : '#eee',
                
              },descriptors[route.key].options]}>
              <Text style={{color: isFocused ? 'white' : 'black'}}>
                {descriptors[route.key].options.title || route.name}
              </Text>
            </Pressable>
          );
        })}
      </View>



      <View style={[{flex: 1}]}>
        {state.routes.map((route, i) => {
          return (
            <View
              key={route.key}
              style={[
                StyleSheet.absoluteFill,
                {alignItems: 'center', justifyContent: 'center'},
                {display: i === state.index ? 'flex' : 'none'},
              ]}>
              {/* {"descriptors[route.key].render()"} */}
            </View>
          );
        })}
      </View>
    </NavigationContent>
  );
}
export const createMyNavigator = createNavigatorFactory(TabNavigator);

I'm using screenOption , so I can style my whole tabs. In docs , It is clearly mention that we can use screenOptions for tabs styling.

Can someone tell me what I'm doing wrong?