How can I have my button navigating me to another screen on the second press rather than having it acting as a close/dismiss button?

I need to use the useState hook from react in my react native project in order to keep track of the state of my button. The reason that I need to do that is so rather than having my button turning into a close/dismiss button after the 1st click I want to be able to re-press (2nd click) on it and have it navigating me to another screen but I wonder how to do all of that.

This is the button on which I want to do it (the big + button). In this picture I already clicked on it once which started the animation (showing the 3 other small buttons) but as I said when I click on it again it acts as a close/dismiss button rather then allowing me to navigate to another screen.

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




    



function AddButton() {

  
  const buttonSize = new Animated.Value(1)
  const mode = new Animated.Value(0)


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

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


  

    const sizeStyle = {
      transform: [{scale: buttonSize}]
    };

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

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

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

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

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

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

    const pulseY = 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, sizeStyle]}>
          <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={handlePress} underlayColor='#00FF6F'>
            <Animated.View style={{ transform: [{rotate: rotation}] }}>
              <FontAwesome name='plus' size={24} color='white' />
            </Animated.View>
          </TouchableHighlight>
        </Animated.View>
        

                
      </View>
    );
  }


  export default AddButton;


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',
  },
});