Изменен от реакции собственного класса на функцию, и он не работает на 100%

Я пытаюсь превратить класс в функцию. Это в основном потому, что если я смогу заставить его работать, я хочу использовать его для изучения различных анимаций, у меня был некоторый успех, но не на 100%. Первоначально он отображал значок, который при нажатии вращался в одну сторону, а при повторном нажатии - в другую. Что я пытался сделать, так это избавиться от значка и заменить его изображением. Он работает при нажатии один раз, но затем ничего не делает.

Я борюсь с переключаемым аспектом этого и устанавливаю состояние, которое я думаю, потому что я не могу правильно настроить его в функции.

Я пробовал несколько вещей, но это лучшее, что я могу получить. Если я покажу исходный код, а затем то, что мне удалось изменить, возможно, кто-то сможет указать мне правильное направление относительно того, что я делаю неправильно.

Все, что я хочу, это изображение, которое отображается, а затем при нажатии вращается вправо, а затем, если щелкнуть снова, оно вращается влево.

Я делаю это, чтобы повозиться с настройками и, надеюсь, немного лучше изучить анимацию.

Любая помощь будет принята с благодарностью.

Оригинальный код:

import React from 'react';
import { View, StyleSheet, Animated, Image, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';

const TabIcon = ({
  onPress,
  menuToggled
}) => {
  const logoStyles = [styles.logoStyle];
  if (menuToggled !== null) {
    const animation = new Animated.Value(menuToggled ? 0 : 1);

    Animated.timing(animation, {
      toValue: menuToggled ? 1 : 0,
      duration: 500,
      useNativeDriver: true
    }).start();

    const rotateInterpolate = animation.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    });
    const animatedStyles = { transform: [{ rotate: rotateInterpolate }] };
    logoStyles.push(animatedStyles);
  }

  return (
    <TouchableOpacity
      style = {styles.tabStyle}
      onPress = {onPress}
    >
      <Animated.View style = {logoStyles}>
        
      
      <Animated.Image
        style = {styles.tinyLogo}
        source = {{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      /></Animated.View>
    </TouchableOpacity>
  );
};
export default class App extends React.Component {
  state = {
    menuToggled: null
  }

  toggleMenu = () => {
    this.setState(prevState => {
      return { menuToggled: !prevState.menuToggled };
    });
  }

  render () {
    return (
      <View style = {styles.container}>
        <TabIcon
          onPress = {this.toggleMenu}
          menuToggled = {this.state.menuToggled}
        />
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },  
  tinyLogo: {
    width: 150,
    height: 150,
    borderRadius: 100,
    margin: 8,
  },
});

и что я изменил до сих пор:

import React, { useRef, useState } from "react";
import { View, StyleSheet, Animated, Image, TouchableOpacity, Easing } from 'react-native';
import Constants from 'expo-constants';

const App = () => {
const spinValue = useRef(new Animated.Value(0)).current;
const [menuToggled, setMenuToggled] = useState([null]);



 toggleMenu = () => {
    setMenuToggled(menuToggled === "null" ? "menuToggled" : "null");
  }

const Spinner = ({
  onPress,
  menuToggled
}) => {
  const logoStyles = [styles.logoStyle];
 
    const animation = new Animated.Value(0);

  const go = () => {
    Animated.timing(animation, {
      toValue: 1,
      duration: 1500,
       easing: Easing.elastic(1),
      useNativeDriver: true
    }).start();

  }

    const rotateInterpolate = animation.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
    });
    const animatedStyles = { transform: [{ rotate: rotateInterpolate }] };
    logoStyles.push(animatedStyles);
 

  return (
    <TouchableOpacity
     
      onPress = {go}  
    >
      <Animated.View style = {logoStyles}>
        
      
      <Animated.Image
        style = {styles.tinyLogo}
        source = {{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      /></Animated.View>
    </TouchableOpacity>
  );
};

  return (
  <View style = {styles.container}>
        <Spinner
          onPress = {toggleMenu} 
          menuToggled = {menuToggled}
          
        />
        
      </View>
  );
}






const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },  
  tinyLogo: {
    width: 150,
    height: 150,
    borderRadius: 100,
    margin: 8,
  },
});

export default App;