Custom Styling of Material Top Tabs Navigator React Native

Question

I want to create this type of Top Tabs Navigator for my project

but i don't know much about styling of Top Tabs Navigator

My Current Design -

Design i want to create -

My Code -

       import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

       const Tab = createMaterialTopTabNavigator();  

       <Tab.Navigator
                    initialRouteName="HOME"
                    sceneContainerStyle={{
                        backgroundColor: '',
                    }}
                    screenOptions={{
                        tabBarScrollEnabled: true,
                        tabBarIndicatorStyle: {
                            backgrounColor: '#fff',
                            width: 70,
                            left: 43,
                        },
                        tabBarStyle: {
                            width: '100%', borderWidth: 0, elevation: 0,
                            backgroundColor: '#07509F',
                            marginBottom: 10,
                            height: 40,
                        },
                        tabBarActiveTintColor: '#fff',
                        tabBarLabelStyle:{
                        }
                    }}

                >
                    <Tab.Screen name="HOME" component={Home} options={{ tabBarLabel: 'HOME' }} />
                    <Tab.Screen name="MATCHES" component={Matches} />
                    <Tab.Screen name="POINTS TABLE" component={Points_Tables} />
                    <Tab.Screen name="PLAYER STATS" component={Player_Stats} />
                    <Tab.Screen name="TEAMS" component={Teams} />
                </Tab.Navigator>

Is it possible to create this design?