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

まず、issue に示されている動的なカテゴリと Tab.Navigator の設定を使用して、createMaterialTopTabNavigator で報告されたインジケーターの位置合わせの問題を再現します。1 番目、2 番目、およびそれ以降のスクロール可能なタブを比較し、各タブのテキストに対してインジケーターが一貫して位置合わせされれば issue は完了したものとします。