React Native: How to align active indicator border to the label with using react navigation with createMaterialTopTabNavigator()

Question

I want to show the active label color with a border at the bottom which is black in color here, but its not aligned to the label width, how to make the width same as label and align it to the label.

Here is the code:-

<View
        style={{
          paddingVertical: verticalScale(20),
          paddingBottom: 0,
          paddingHorizontal: horizontalScale(10),
          flex: 1,
        }}
      >
        <Tab.Navigator
          screenOptions={{
            tabBarActiveTintColor: Colors.primaryColor.primary400,
            tabBarInactiveTintColor: Colors.grayColor.gray600,
            tabBarPressOpacity: 1,
            tabBarScrollEnabled: true,
            tabBarAndroidRipple: false,
            tabBarPressColor: 'transparent',
            tabBarContentContainerStyle:{
              flex: 1,
              justifyContent: 'flex-start',
              gap: horizontalScale(7),
            },
            tabBarLabelStyle: {
              fontSize: moderateScale(12),
              paddingVertical: verticalScale(4),
              paddingHorizontal: 0,
              marginRight: 0,
              borderRadius: 0,
            },
            tabBarItemStyle: {
              padding: 0,
              lineHeight: 1,
              minHeight: 0,
              alignItems: "flex-start",
              width: "auto",
              backgroundColor: "transparent",
              overflow: "hidden",
            },
            tabBarIndicatorContainerStyle:{
              flex: 1,
              width: '100%',
              gap: horizontalScale(5),
            },
            tabBarIndicatorStyle: {
              backgroundColor: '#000',
              height: verticalScale(2),
              margin: 0,
              marginBottom: verticalScale(2),    
            },
            tabBarStyle: {
              backgroundColor: "transparent",
              elevation: 0,
              marginBottom: verticalScale(10),
            },
          }}
          style={{ flex: 1 }}
        >
          <Tab.Screen name="Today's Summary" component={TodaysSummary} />
          <Tab.Screen name="Recent Activity" component={RecentActivity} />
          <Tab.Screen
            name="Birthday/Anniversaries"
            component={BirthdayAnniversary}
          />
        </Tab.Navigator>
      </View>

Here how it look:-

Which props and styles should I use, please guide.