React Native - Changing the indicator width according to tab bar text width (react-native-tab-view)

I am using react-native-tab-view, and trying to change the indicator width. I would like indicator width to be the same with the tab text. But What I did is just the default. I have tried in many ways, but always it gave me the wrong result. The tab bar should be scrollable horizontally as well. Could you check which part I should change?

This is the expected result :

ShowAllIndex Code :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.dark,
  },
});

const ShowAllIndex = () => {
  const { seller } = useSelector((s) => s.auth, shallowEqual);
  const [routes] = useState([
    { key: 'best', title: 'BEST' },
    { key: 'jacket', title: '아우터' },
    { key: 'pants', title: '바지' },
    { key: 'skirts', title: '스커트' },
    { key: 'topClothe', title: '원피스' },
    { key: 'one', title: '바지' },
    { key: 'two', title: '스커트' },
    { key: 'three', title: '상의' },
  ]);

  const renderScene = SceneMap({
    best: ShowAllMainRoutes,
    jacket: JacketRoutes,
    pants: PantsRoutes,
    skirts: SkirtsRoutes,
    topClothe: TopClotheRoutes,
    one: ShowAllMainRoutes,
    two: JacketRoutes,
    three: PantsRoutes,
  });

  return (
    <ScrollView style={[styles.container, { marginTop: Global() }]}>
      <CustomTabView
        routes={routes}
        renderScene={renderScene}
        scrollEnabled={true}
        tabStyle={{ width: 'auto' }}
        showAll={true}
      />
    </ScrollView>
  );
};

export default ShowAllIndex;

CustomTabView code :

const initialLayout = { width: Dimensions.get('window').width };

const CustomTabView = ({
  routes,
  renderScene,
  numberOfTabs,
  indicatorWidth,
  scrollEnabled = false,
  tabStyle,
  showAll,
  indicatorStyle,
}) => {
  const [index, setIndex] = useState(0);

  const renderTabBar = (props) => (
    <TabBar
      {...props}
      scrollEnabled={scrollEnabled}
      indicatorStyle={[
        indicatorStyle,
        {
          backgroundColor: colors.barbie_pink,
          height: 2.5,
          bottom: -1,
        },
      ]}
      style={[styles.tabBar]}
      renderLabel={({ route, focused }) => {
        return (
          <Text
            style={[styles.label, focused ? styles.activeLabel : styles.label]}
          >
            {route.title}
          </Text>
        );
      }}
      tabStyle={tabStyle}
    />
  );

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      renderTabBar={renderTabBar}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      style={[styles.container]}
    />
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.dark,
  },
  scene: {
    flex: 1,
    marginTop: 5,
  },
  tabBar: {
    backgroundColor: 'transparent',
    shadowOpacity: 0,
    elevation: 0,
    borderBottomWidth: 0.5,
    borderColor: colors.very_light_pink_two,
    marginBottom: 5,
  },
  label: {
    color: colors.very_light_pink_four,
    fontSize: 14,
    lineHeight: 20.8,
    fontFamily: 'NotoSansCJKkr-Regular',
    letterSpacing: -0.35,
  },
  activeLabel: {
    color: colors.barbie_pink,
  },
});

Thank you for answers!

I think the prop indicatorStyle in TabBar that can resolves you problem.