How can I keep track of the big button's state?

This is my code and when I click on the big green button (Image below), it show 3 more new buttons but I want to keep track of the big button's state which I am unable to do. I am new to react native but I belive this is done with Hooks and useState but I just don't know what to do now. It is this big button with the + which I am trying to keep track of

   import React, {useRef, useState} from 'react';
    import {View, StyleSheet, Text, TouchableHighlight, Animated} from  
   'react-native';
    import {Feather, FontAwesome} from '@expo/vector-icons';
    
    
    
    
    function AddButton() {
      
      const [buttonSize, setButtonSize] = useState(new Animated.Value(1))
      const mode = new Animated.Value(0)
    
    //  const changeTopics = new Animated.Value(0)
      
    
      
       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 changeTopic = {
    //      transform: [{scale: changeTopics}]
    //    };
    
    
        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',
      },
    });