I am using

const Tab = createMaterialTopTabNavigator();

to create a tab navigation. Everything seems to work but I cannot align the tabbar indicator in the with the individual tabbar item. As per the design the tabBar Indicator width is supposed to be 100, Is there any way to do so?

const Faq = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={{ alignSelf: "flex-start", margin: 5 }}>
        <BackButton />
      </View>
      <Text style={styles.title}>F.A.Q</Text>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarStyle: {
            height: 65,
            elevation: 0,
            marginBottom: 20,
          },
          tabBarContentContainerStyle: {},
          tabBarItemStyle: {},
          tabBarIndicatorContainerStyle: {
          // borderWidth: 1,
          },
          tabBarLabelStyle: styles.tabBarLabel,
          tabBarIndicatorStyle: styles.tabBarIndicator,
          tabBarActiveTintColor: "#3E3E3E",
          tabBarInactiveTintColor: "#A4A8AE",
          headerShown: false,
          })}
         >
      <Tab.Screen name="Shopping" component={BuyerScreen} />
      <Tab.Screen name="Setting" component={BusinessScreen} />
     </Tab.Navigator>
    </SafeAreaView>
 );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    paddingHorizontal: 20,
  },
  title: {
    marginTop: 15,
    fontSize: 55,
    fontFamily: "PhotographSignature",
    letterSpacing: 1,
    textAlign: "center",
    color: "#3e3e3e",
  },
    tabBarLabel: {
    fontSize: 16,
    fontFamily: "Raleway-Regular",
    textAlign: "center",
    lineHeight: 18.78,
    letterSpacing: 1,
  },
  tabBarIndicatorContainerStyle: {
    borderColor: "black",
    borderWidth: 1,
  },
  tabBarIndicator: {
    width: 100,
    height: 5,
    backgroundColor: "#B8D2C7",
  },
});