How to center top tabs in MaterialTopTabNavigator in ReactNative

Question

Expected Output

Actual Output

I need top tab navigation like expected output.I used React native navigation material top navigation.I couldn't do centre the label on the top tab navigator and active indicator. This is my code

   return (
   <Tab.Navigator  initialRouteName="HomeScreen" 
   screenOptions={{tabBarActiveTintColor:'white',
   tabBarIndicatorStyle:{backgroundColor:'black'},
   tabBarScrollEnabled: true,
   tabBarLabelStyle: {fontSize: 12,color: 'black',fontFamily:"Regular",},
   tabBarItemStyle: {},
   tabBarStyle: {elevation:0,width: "auto",},
   }}>
     <Tab.Screen
       name={'HomePage'}
       component={HomePage}
       options={{
         tabBarLabel: 'Home',
         headerShown: false,
         tabBarIcon: ({color, size}) => (
           <MaterialCommunityIcons name="home" color={color} size={size} />
         ),
       }}
     />
     <Tab.Screen
       name={'Profile'}
       component={Profile}
       options={{
         tabBarLabel: 'Profile',
         headerShown: false,
         tabBarIcon: ({color, size}) => (
           <MaterialCommunityIcons
             name="book-open-blank-variant"
             color={color}
             size={size}
           />
         ),
       }}
     />
   </Tab.Navigator>
 );
};