Custom TabBar Goes back and forth onPress

[metinaltinbas]

I created my own custom Tabbar. I want user to change tabbar index by pressing on it. I did it but once I press on it , it goes back and forth.

Here is my code and video below.

https://user-images.githubusercontent.com/33545857/200281529-3248f045-a3ac-48c6-a7d1-c7fcf9650c66.mov

useEffect(() => {
    if (tabRef.current) {
      tabRef.current.setIndex(index);
    }
  }, [index]);

<Tabs.Container
          ref={tabRef}
          renderHeader={() => null}
          lazy={true}
          headerContainerStyle={{
            shadowOpacity: 0,
            elevation: 0,
          }}
          onIndexChange={index => {
            setIndex(index);
          }}
          renderTabBar={props => (
            <MaterialTabBar
              {...props}
              // scrollEnabled
              inactiveColor={'rgb(177,177,177)'}
              activeColor={colors.appPurple}
              labelStyle={{
                textTransform: 'none',
              }}
              contentContainerStyle={{justifyContent: 'space-evenly'}}
              style={{
                backgroundColor: colors.backgroundColor,
                textTransform: 'none',
                ...ifIphoneX(
                  {
                    height: moderateScale(50),
                  },
                  {
                    height: moderateScale(40),
                  },
                ),
              }}
              indicatorStyle={{backgroundColor: 'black'}}
              TabItemComponent={props => (
                <View
                  style={{
                    justifyContent: 'flex-end',
                    alignItems: 'center',
                  }}>
                  <MaterialTabItem
                    {...props}
                    onPress={() => {
                      setIndex(props.index);
                    }}
                    labelStyle={{
                      fontFamily: 'SpaceGrotesk-Medium',
                      fontSize: moderateScale(16, 0.7),
                      margin: 0,
                      paddingHorizontal: moderateScale(10),
                    }}
                    label={
                      props.label.charAt(0).toUpperCase() +
                      props.label.slice(1).toLowerCase()
                    }
                  />
                  {props.index === index ? (
                    <Image
                      source={{uri: 'selectedTabIcon'}}
                      style={styles.tabIcon}
                    />
                  ) : null}
                </View>
              )}
            />
          )}>