I am trying to implement the basic entry/exist fade animation where the content shows either a loading animation or the value of the results. These should fade in & out depending on the state of the ternary

<Pressable
        disabled={isValidating || !isMatch}
        onPress={capturePhoto}
      >
        <FlexRow>
          <View>
            {thumbnail ? (
              <Image
                placeholder={blurhash}
                source={{
                  uri: thumbnail,
                }}
              />
            ) : (
              <LoadingSkeleton />
            )}
          </View>
// here is ternary
          {isValidating ? (
            <Animated.View
              entering={FadeIn}
              exiting={FadeOut}
              style={{ flex: 1, flexDirection: 'row' }}
            >
              <LoadingSpinner />
            </Animated.View>
          ) : (
            <Animated.View
              entering={FadeIn}
              exiting={FadeOut}
            >
              <Typography >
                {titleText}
              </Typography>
            </Animated.View>
          )}
        </FlexRow>
      </Pressable>

I am using:
“react-native-reanimated”: “~3.6.2”,
“react-native”: “0.73.6”,

Any ideas?