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

Bắt đầu bằng cách tái hiện vấn đề căn chỉnh indicator đã được báo cáo với createMaterialTopTabNavigator, sử dụng các danh mục động và cấu hình Tab.Navigator được nêu trong issue. So sánh tab có thể cuộn thứ nhất, thứ hai và các tab tiếp theo, đồng thời coi issue là hoàn tất khi indicator luôn căn chỉnh nhất quán với văn bản của từng tab.