I created this Image Input component

const ImageInputComponent = ({onImagePicked} : {onImagePicked : (blob : Blob | null) => void}) => {
  const [image, setImage] = useState("");

  return (
    <TouchableOpacity style={styles.container}
        onPress={async () => {
            const imageUrl = await PickImage();
            if (imageUrl) {
                setImage(imageUrl);
                const blob = await ConvertUriToBlob(imageUrl);
                onImagePicked(blob);
            } else {
                onImagePicked(null);
            }
        }}
    >
        <Image source={{uri: image}} style={styles.image} resizeMode="cover"/>
    </TouchableOpacity>
  )
}

That uses this customs hooks with expo image picker, and other that converts the uri to a blob to upload it to firebase

import * as ImagePicker from 'expo-image-picker';

const PickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.cancelled) return result.uri;
};

const ConvertUriToBlob = async (uri : string) => {
    const response = await fetch(uri);
    const blob = await response.blob();
    return blob;
}

But when i try to use it in a screen, it doesn't seem to return anything, and when i navigate to another screen it throws the error "No default value"

const StoreDetails = () => {
  const navigation = useNavigation();

  const [images, setImages] = useState<Blob[]>([]);

  const updateImagesArray = (image: Blob, index: number) => {
    let newImages = images;
    newImages[index] = image;
    setImages(newImages);
  }
  
  return (
    <View>
        <View style={styles.imageContainer}>
            <ImageInput onImagePicked={(image) => {if(image) updateImagesArray(image, 0)}}/>
            <ImageInput onImagePicked={(image) => {if(image) updateImagesArray(image, 1)}}/>
            <ImageInput onImagePicked={(image) => {if(image) updateImagesArray(image, 2)}}/>
        </View>

        <TouchableOpacity
            onPress={() => navigation.navigate('RegisterProducts', {data: {images}})}
        >
            <Text>SIGUIENTE</Text>
        </TouchableOpacity>
    </View>
  )
}

How can i fix this? or what other way can i do this?