My Image Picker is able to select image from the gallery but it is unable to display the image on the app, I've tried many ways and reviewed my code all over again but I'm unsure what went wrong. Can anyone tell me what's the problem? Here is my reactnative and picker version:

"react-native-image-crop-picker": "^0.37.2", "react-native": "0.67.1",

import { Alert, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, SafeAreaView, TextInput} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';

const Imagepick = ({navigation}) => {
    const [image, setImage] = useState(null)
    const [images, setImages] = useState(null)

      const pickSingle = (cropit, circular = false, mediaType) => {
        ImagePicker.openPicker({
          width: 500,
          height: 500,
          cropping: cropit,
          cropperCircleOverlay: circular,
          sortOrder: 'none',
          compressImageMaxWidth: 1000,
          compressImageMaxHeight: 1000,
          compressImageQuality: 1,
          compressVideoPreset: 'MediumQuality',
          includeExif: true,
          cropperStatusBarColor: 'white',
          cropperToolbarColor: 'white',
          cropperActiveWidgetColor: 'white',
          cropperToolbarWidgetColor: '#3498DB',
        })
          .then((image) => {
            console.log('received image', image);
            setImage({
                uri: image.path,
                width: image.width,
                height: image.height,
                mime: image.mime,
            })
            setImage(null);
          })
          .catch((e) => {
            console.log(e);
            Alert.alert(e.message ? e.message : e);
          });
      }


    const renderAsset = (image) =>  {
        return renderImage(image);
    }

    const renderImage = (image) => {
        return (
          <Image
            style={{ width: 300, height: 300, resizeMode: 'contain' }}
            source={image}
          />
        );
      }
    

    return (
        <View style={styles.container}>

            {image ? renderAsset(image) : null}
            {images
                ? images.map((i) => (
                    <View key={i.uri}>{this.renderAsset(i)}</View>
                ))
            : null}
            
            <TouchableOpacity onPress={() => pickSingle(false)} style={styles.button}>
                <Text style={styles.text}>Select Single</Text>
            </TouchableOpacity>      

        </View>
    )
}
export {Imagepick}