Not responding Custom Actions from Gifted chat

Question

I am not to familiar with react-native and I have tried to get help from my mentor, anyhow he is not familiar with the topic (react-native, Gifted chat). So I have this two components: ChatScreen and Custom Actions. Custom Actions should render within ChatScreen within the Gifted Chat component. I am using the expo-Image-picker and expo location. Sadly I have not been successful(I have not been able to find why it is not responding the function choose pick, since take pick within custom actions is working. Interestingly and strange is that two out of the three functions work. The expected result are that a image chossing accessed from the library, taking a picture and being able to share the image, and lastly sharing the location.

This is how it looks like in my ChatScreen- Example:

return (
   <View style={[styles.container, {backgroundColor: backgroundColor}]} >
     <Text style={[styles.title, {color: color}]}>Hello there, you are in the Chat Screen</Text>
     <GiftedChat 
     messages={messages}
     renderBubble={renderBubble}
     onSend={(messages) => onSend(messages)}
     renderInputToolbar={renderInputToolbar}
     renderActions={renderCustomActions}
     renderCustomView={renderCustomView}
     
     user={{
      _id: userID,
      name
     }}
     />
 
      { Platform.OS === "android" ? <KeyboardAvoidingView behavior="height"/> : null}
      { Platform.OS === "ios" ? <KeyboardAvoidingView behavior="height"/> : null}
   
     </View>
 );

Before the rendering I have for both Components: Custom Actions and Custom View the return element defined as:

const renderCustomActions = (props) => {
      return <CustomActions userID={userID} onSend={onSend} storage={storage} {...props} />;
    };
  
    const renderCustomView = (props) => {
      const { currentMessage } = props;
      if (currentMessage.location) {
        return (
          <MapView 
          style={{ width: 150, height: 100, borderRadius: 13, margin: 3 }}
          region={{ latitude: currentMessage.location.latitude, longitude: currentMessage.location.longitude, 
          latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}  />
        );
      }
      return null;
    }

This is my Custom Actions component:

import { Alert, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useActionSheet } from "@expo/react-native-action-sheet";
import * as ImagePicker from "expo-image-picker";
import * as Location from "expo-location";
import { uploadBytes, ref, getDownloadURL } from "firebase/storage";
import { useCallback, useEffect, useState } from "react";

const CustomActions = ({ wrapperStyle, iconTextStyle, onSend, storage, userID }) => {
    const actionSheet = useActionSheet();
        
    const onActionPress = useCallback(() => {
        const options =  ["Choose From Library", "Take Picture", "Send Location", "Cancel"];
        const cancelButtonIndex = options.length - 1;
        actionSheet.showActionSheetWithOptions({
            options, cancelButtonIndex,
        },
        async (buttonIndex) => {
            switch (buttonIndex) {
                case 0:
                    await pickImage().catch(console.error);
                    console.log("user wants to choose pick");
                    return;
                case 1:
                    await takePhoto(onSend).catch(console.error);
                    console.log("user wants to take pick");
                    return;
                case 2:
                    await getLocation().catch(console.error);
                default:
                
            }
        },
      )
    });
            
    

    const uploadAndSendImage = async(imageURI) => {
        const uniqueRefString = generateReference(imageURI);
        const newUploadRef = ref(storage, uniqueRefString);
        const response = await fetch(imageURI);
        const blob = await response.blob();
        uploadBytes(newUploadRef, blob).then(async (snapshot) => {
        const imageURL = await getDownloadURL(snapshot.ref)
        onSend({ image: imageURL })
            });
    }

    const generateReference = (uri) => {
        // this will get the file name reference from the uri
        const imageName = uri.split("/")[uri.split("/").length - 1];
        const timeStamp = (new Date()).getTime();
        return `${userID}-${timeStamp}-${imageName}`;
    }

    const pickImage = async () => {
        let permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (permission?.granted) {
            let result = await ImagePicker.launchImageLibraryAsync();
        if (!result.canceled)  await uploadAndSendImage(result.assets[0].uri)
        } else {
Alert.alert("Permission has not been granted")
}
        }
    
    
    const takePhoto = async () => {
        console.log("takePhoto");
        let permission = await ImagePicker.requestCameraPermissionsAsync();
        if(permission?.granted) {
            console.log(permission);
            let result = await ImagePicker.launchCameraAsync();
        if(!result.canceled) await uploadAndSendImage(result.assets[0].uri);
        } else {
Alert.alert("Permission has not been granted")
}
    }

    const getLocation = async () => {
        let permission = await Location.requestForegroundPermissionsAsync();
        if (permission?.granted) {
            const location = await Location.getCurrentPositionAsync({});
            if (location) {
              onSend({
                location: {
                    longitude: location.coords.longitude,
                    latitude: location.coords.latitude
                    }
                })
            } else Alert.alert("Error ocurred while fetching location");  
        } else Alert.alert("Permission to read location is not granted"); 
    }
    
    
    return(
        <TouchableOpacity
        style={styles.container} 
        onPress={onActionPress}
        accessible={true}
        accessibilityLabel="More options"
        accessibilityHint="Lets you choose take pictures, choose images, and send geolocation"
        accessibilityRole="button" >
          <View style={[styles.wrapper, wrapperStyle]}>
          <Text style={[styles.iconText, iconTextStyle]}>+</Text>
          </View>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    container: {
        width: 32,
        height: 32,
        marginLeft: 10,
        marginRight: 10
    },
    wrapper: {
        borderRadius: 15,
        borderColor: "#b2b2b2",
        borderWidth: 2,
        flex: 1,
        
    },
    iconText: {
        color: "#000000",
        fontWeight: "bold",
        fontSize: 18,
        backgroundColor: "transparent",
        textAlign: "center",
        alignContent: "center",
        marginBottom: 5,
        marginTop: 2,
        marginLeft: "auto",
        marginRight: "auto",
        
    }
})

export default CustomActions;

I have tried implementing this to the Custom Actions functions: async (buttonIndex) => { ... await pickImage(); ... } as well: (buttonIndex) => { ... pickImage().catch(console.error); ... } This is what I receive from the console from the previous approaches: user wants to choose pick LOG takePhoto LOG {"canAskAgain": true, "expires": "never", "granted": true, "status": "granted"} LOG user wants to take pick LOG takePhoto LOG {"canAskAgain": true, "expires": "never", "granted": true, "status": "granted"} LOG user wants to take pick

To provide more context I even tried the functions to be rendered without setting firebase and the generated reference and they work outside Gifted chat: example:

...
  const [image, setImage] = useState(null);

    const pickImage = async () => {
      let permissions = await ImagePicker.requestMediaLibraryPermissionsAsync();

      if (permissions?.granted) {
        let result = await ImagePicker.launchImageLibraryAsync();

        if (!result.canceled) setImage(result.assets[0]);
        else setImage(null)
      }
    }

  const takePhoto = async () => {
    let permissions = await ImagePicker.requestCameraPermissionsAsync();

    if (permissions?.granted) {
      let result = await ImagePicker.launchCameraAsync();

      if (!result.canceled) setImage(result.assets[0]);
      else setImage(null)
    }
  }

  return (
    <View style={styles.container}>
      <Button
        title="Pick an image from the library"
        onPress={pickImage}
      />

      <Button
        title="Take a photo"
        onPress={takePhoto}
      />
      {image &&
        <Image source={{ uri: image.uri }} style={{ width: 200, height: 200 }} />
      }

The expected results are to be able to choose Images from the firebase cloud, activate the camera and be able to take the picture and send it(which it does), and to be able to send the geolocation (as well the function is working). I even reviewed the question: gifted-chat renderAction prop won't call a function which did not resolved my bug.