React Native Pressable OnPress Function

Question

Currently I am working on a React Native Project where I have to connect to an API. I am creating a search function but it seems like the Pressable function is not working.

Here is the Search function I am working at. I have add a few console.log to check for the Pressable but none of the console.log is shown.

<Pressable
  onPress={handleSearch}
  style={[styles.searchBtn, {width: '20%'}]}>
  <Animated.Text style={[styles.searchBtnText, FONTS.h5, {color: COLORS.white},animatedStyle]}>
    Search
  </Animated.Text>
</Pressable>

This is my code only for the Pressable function and below is the code for my whole search function.

import { Animated ,Pressable, StyleSheet, Text, View, TextInput } from 'react-native'
import React, {useEffect, useState } from 'react'
import { FlatList } from 'react-native-gesture-handler'
import { COLORS, FONTS, SIZES } from '../constants'

import { exerciseOptions, fetchWorkout } from '../utils/fetchWorkout'

const SearchWorkout = () => {
    
    const [search, setSearch] = useState('')
    const [animation, setAnimation] = useState(new Animated.Value(1));

    const handleSearch = async () => {
      console.log("Search button pressed")
      if(search) {
          console.log("Animation Before:",animation._value)
          Animated.timing(animation, {
              toValue: 0.5,
              duration: 200,
              useNativeDriver: true,
          }).start();
          const exercisesData = await fetchWorkout(
              'https://exercisedb.p.rapidapi.com/exercises/bodyPartList', exerciseOptions
          );
          console.log(exercisesData)
          Animated.timing(animation, {
              toValue: 1,
              duration: 200,
              useNativeDriver: true,
          }).start();
          console.log("Animation After:",animation._value)
      }
  }

    const animatedStyle = {
      transform: [{ scale: animation }],
  };

    return (
      <View style={styles.container}>
        <View style={styles.searchContainer}>
          <TextInput 
          keyboardType='default'
          value={search}
          onChangeText={(text) => setSearch(text.toLowerCase())}
          style={[styles.input, FONTS.h5, {color: COLORS.black, width: '80%'}]} 
          placeholder='Search Food'/>
    <Pressable
        onPress={handleSearch} 
        style={[styles.searchBtn, {width: '20%'}]}>
            <Animated.Text style={[styles.searchBtnText, FONTS.h5, {color: COLORS.white},animatedStyle]}>
                Search
            </Animated.Text>
    </Pressable>
        </View>
        <View style={styles.scrollContainer}>
          <FlatList />
        </View>
      </View>
    )
  }

export default SearchWorkout;

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginTop: SIZES.padding,
    justifyContent: 'center',
    padding: SIZES.padding
  },
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
    position: 'relative',
    marginBottom: SIZES.base * 3,
  },
  input: {
    height: SIZES.inputHeight,
    width: SIZES.inputWidth,
    backgroundColor: COLORS.white,
    borderWidth: 1,
    borderColor: COLORS.inputBorderColor,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    borderTopLeftRadius: SIZES.inputBorderRadius,
    borderBottomLeftRadius: SIZES.inputBorderRadius,
    padding: SIZES.inputPadding,
    fontSize: 5,
},
searchBtn: {
    height: SIZES.inputHeight,
    width: SIZES.searchBtnWidth,
    backgroundColor: COLORS.red,
    alignItems: 'center',
    justifyContent: 'center'
},
  searchBtnText: {
    color: COLORS.searchBtnTextColor,
    textAlign: 'center',
    fontSize: 14,
  },
  scrollContainer: {
      position: 'relative',
      width: '100%',
      padding: 20
    }
  });