Hide and show on scroll right and left React-Native

Question

0. In React Native, I am trying to create a Flatlist horizontal with right and left arrows, and I hope to make arrows to be visible and invisible on press on condition that it stays invisible if it is already on the side of right or left until condition changes
1. I want left arrow be invisible in default
2. when pressed right arrow, right arrow should be invisible while left arrow becomes visible and vice-versa
3. however it should not be visible if you press two or three times the same arrow

  const leftScrollHandler = () => {
    listViewRef.scrollToOffset({ offset: 0.5, animated: true });
  };

  const rightScrollHandler = () => {
    //OnCLick of right button we scrolled the list to bottom
    listViewRef.scrollToEnd({ animated: true });
  };
  // this below is for scroller to apear and disapear funtionality

  const [backgroundColor, setBackgroundColor] = useState("transparent");
  const [backgroundColor2, setBackgroundColor2] = useState(colors.secondary);
  const [pressed, setPressed] = useState(false);
  function changeColor() {
    if (!pressed) {
      setPressed(true);
      setBackgroundColor(colors.secondary);
      setBackgroundColor2("transparent");
    } else {
      setPressed(false);
      setBackgroundColor2(colors.secondary);
      setBackgroundColor("transparent");
    }
  }

 <FlatList
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        data={Data}
        keyExtractor={(item, index) => [item.id, index.toString()]}
        renderItem={renderItem}
        ref={(ref) => {
          listViewRef = ref;
        }}
      />
      <TouchableOpacity
        activeOpacity={0.5}
        onPress={() => {
          changeColor();
          leftScrollHandler();
        }}
        style={
          (web && isTablet) || isDesktop
            ? styles.leftScrollDesktop
            : styles.leftScroll
        } >
        <AntDesign
          style={styles.leftArrow}
          name="arrowleft"
          size={(web && isTablet) || isDesktop ? 50 : 35}
          color={backgroundColor}
        />
      </TouchableOpacity>
      <TouchableOpacity
        activeOpacity={0.5}
        onPress={() => {
          changeColor();
          rightScrollHandler();
        }}
        style={
          (web && isTablet) || isDesktop
            ? styles.rightScrollDesktop
            : styles.rightScroll
        }
      >
        <AntDesign
          style={styles.rightArrow}
          name="arrowright"
          size={(web && isTablet) || isDesktop ? 50 : 35}
          color={backgroundColor2}
        />
      </TouchableOpacity>