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

Start by reproducing the reported indicator alignment problem with createMaterialTopTabNavigator, using the dynamic categories and Tab.Navigator configuration shown in the issue. Compare the first, second, and later scrollable tabs, and consider the issue complete when the indicator aligns consistently with each tab's text.