Indicator not aligned with text in createMaterialTopTabNavigator

I am trying to implement the top tab with scrollable tabs which are dynamic in number.

Following is my code:

<View style={{flex: 1}}>
        {categories.length > 0 && (
          <Tab.Navigator
            lazy
            tabBarOptions={{
              labelStyle: {
                fontSize: 13,
                fontFamily: gothamMedium,
                textTransform: 'none',
                alignSelf: 'center',
                textAlign: 'center',
              },
              indicatorStyle: {
                backgroundColor: colors.AQUAMARINE,
                height: 4,
              },
              activeTintColor: colors.GREYISH_BROWN,
              inactiveTintColor: colors.WARM_GREY,
              scrollEnabled: true,
            }}>
            {categories.map(category => (
              <Tab.Screen
                options={{
                  title: category.title,
                }}
                name={category.title}
                component={() => <TabList tabData={category} />}
              />
            ))}
          </Tab.Navigator>
        )}  </View>

Which works fine for the first tab:

And here is how second tab looks like:

And it gets worse scrolled to 3rd and beyond

Beginne damit, das gemeldete Problem mit der Ausrichtung des Indikators bei createMaterialTopTabNavigator zu reproduzieren, und verwende dabei die im Issue gezeigten dynamischen Kategorien und die Tab.Navigator-Konfiguration. Vergleiche den ersten, den zweiten und die späteren scrollbaren Tabs und betrachte das Issue als abgeschlossen, wenn der Indikator konsistent am Text jedes Tabs ausgerichtet ist.