How can I make my animated button turn into another button after its animation rather than turning into a close button?

Basically I have an animated button and when I click on it, it does exactly what I want (it shows more buttons) but then if I press on it again, it closes it rather than allowing me to give it another function. So what I would want is something like on twitter mobile where when the + button is clicked you can click on it again and it will do something else than closing everything (for the case of twitter it allows you to make a post).

import React, {useRef} from 'react';
import {View, StyleSheet, Text, TouchableHighlight, Animated} from 'react-native';
import {Feather, FontAwesome} from '@expo/vector-icons';




export default class AddButton extends React.Component {
  buttonSize = new Animated.Value(1)
  mode = new Animated.Value(0)

  changeTopics = new Animated.Value(0)


  handlePress = () => {
    Animated.sequence([
      Animated.timing(this.buttonSize, {
        toValue: 0.95,
        duration: 1,
        useNativeDriver: false
      }),
      Animated.timing(this.buttonSize, {
        toValue: 1,
        duration: 1,
        useNativeDriver: false,
      }),
      Animated.timing(this.mode, {
        toValue: this.mode._value === 0 ? 1 : 0,
        useNativeDriver: false
      }),
      Animated.delay(0)
    ]).start();
  };


  render() {
    const sizeStyle = {
      transform: [{scale: this.buttonSize}]
    };


    const changeTopic = {
      transform: [{scale: this.changeTopics}]
    };


    const rotation = this.mode.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '45deg']
    });

    const thermometerX = this.mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-24, -100]
    });

    const thermometerY = this.mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-50, -100]
    });

    const timeX = this.mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-24, -24]
    });

    const timeY = this.mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-50, -150]
    });

    const pulseX = this.mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-24, 50]
    });

    const pulseY = this.mode.interpolate({
      inputRange: [0, 1],
      outputRange: [-50, -100]
    });

    

    return (
      <View style={{position: 'absolute', alignItems: 'center'}}>
  
        <Animated.View style={{position: 'absolute', left: thermometerX, top: thermometerY}}>
          <View style={styles.secondaryButton}>
            <Feather name="thermometer" size={24} color='#FFF' />
          </View>
        </Animated.View>

        <Animated.View style={{position: 'absolute', left: timeX, top: timeY}}>
          <View style={styles.secondaryButton}>
            <Feather name="clock" size={24} color='#FFF' />
          </View>
        </Animated.View>

        <Animated.View style={{position: 'absolute', left: pulseX, top: pulseY}}>
          <View style={styles.secondaryButton}>
            <Feather name="activity" size={24} color='#FFF' />
          </View>
        </Animated.View>

        
        <Animated.View style={[styles.button, changeTopic]}>
          <TouchableHighlight onPress={() => {alert('You tapped the button!');}}>          
            <FontAwesome name="comment" size={24} color='#FFF' />
          </TouchableHighlight>  
        </Animated.View> 


        <Animated.View style={[styles.button, sizeStyle]}>
          <TouchableHighlight onPress={this.handlePress} underlayColor='#00FF6F'>
            <Animated.View style={{ transform: [{rotate: rotation}] }}>
              <FontAwesome name='plus' size={24} color='white' />
            </Animated.View>
          </TouchableHighlight>
        </Animated.View>

                
      </View>
    );
  }
}



const styles = StyleSheet.create({
  button: {
    backgroundColor: '#00FF6F',
    alignItems: 'center',
    justifyContent: 'center',
    width: 72,
    height: 72,
    borderRadius: 36,
    position: 'absolute',
    top: -60,
    shadowColor: 'green',
    shadowRadius: 5,
    shadowOffset: {height: 10},
    shadowOpacity: 0.3,
    borderWidth: 1.5,
    borderColor: 'white',
    elevation: 3,
  },
  secondaryButton: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 48,
    height: 48,
    borderRadius: 24,
    position: 'absolute',
    backgroundColor: '#00FF6F',
  },
});

[This is what I have and then it shows the thermometer, the pulse and the clock but the big button, when clicked again does not allow me to do anything else than closing yet I would like to have it do something such as navigating to another page, making a post or other things][1] [1]: https://i.stack.imgur.com/rGcBX.png