Dynamic changing of icon

[BigRaj]

I have set my Circle button to activate the camera, and when in camera mode, take pictures. I want to change the icon based on how many pictures have been taken. The use case is after 4 pictures, the next click should upload the images to the cloud. The functionality works fine, but I can't get the icon to change.

    if(selectedTab === 'camera' && picturesPending.length >3){
      return (
        <Animated.View style={styles.btnCircleUp}>
          <TouchableOpacity
            style={styles.button}
            onPress={ () => {
              takePicture(routeName, selectedTab, navigate);
            }}
          >
            <Ionicons name={'cloud-upload-outline'} color="#435dd0" size={25} />
          </TouchableOpacity>
        </Animated.View>
      );
    }
    if(selectedTab === 'camera'){
      return (
        <Animated.View style={styles.btnCircleUp}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              childRef.current.takePicture();
            }}
          >
            <Ionicons name={'camera'} color="#435dd0" size={25} />
          </TouchableOpacity>
        </Animated.View>
      );
    }
    else{
      return (
        <Animated.View style={styles.btnCircleUp}>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigate('camera')}
          >
            <Ionicons name={'camera'} color="gray" size={25} />
          </TouchableOpacity>
        </Animated.View>
      )
    }
  }```