Supabase: Error while updating property ‘src of a view managed by: RCTImageView null Value for URI cannot be cast from ReadableNativeMap to String

I am encountering an issue when attempting to render images fetched from Supabase in my React Native application. The error message I receive is:

Error while updating property 'src of a view managed by: RCTImageView, null, Value for URI cannot be cast from ReadableNativeMap to String. 

const loadData = async () => {
    if (!user) return;
  
    try {
      const { data, error } = await supabase
        .from('posts')
        .select('id, description, location, images, created_at')
        .eq('id_user', user.id_user);
  
      if (error) {
        console.error('Error fetching posts:', error);
        return;
      }
  
      console.log('Raw fetched posts data:', data);
  
      if (data && data.length > 0) {

        setPosts(data);
      } else {
        console.log('No posts found in the database.');
      }
    } catch (err) {
      console.error('Unexpected error loading data:', err);
    }
};

{/* Posts Section */}
      {selectedButton === 'posts' && (
        <View style={styles.postsContainer}>
          {posts.map((postItem, index) => (
            <View style={styles.postItem} key={index}>
              <View style={styles.postInfoContainer}>
                <Text style={styles.postInfo}>Me • {formatDate(postItem.date)}</Text>
                <TouchableOpacity onPress={() => toggleMenu(postItem)}>
                  <Icon name="dots-horizontal" size={25} color="black" />
                </TouchableOpacity>
              </View>
              <Text style={styles.postLocation}>
                Located in {postItem.location} • Contact Number #9999999999
              </Text>

              {postItem.description && (
                <Text style={styles.postTitle}>{postItem.description}</Text>
              )}


              {console.log('Post images:', postItem.images)}


              {postItem.images && postItem.images.length > 0 ? (
                <View style={styles.imageContainer}>
                  <TouchableOpacity onPress={() => openImageModal(postItem.images)}>
                    {postItem.images.length === 1 ? (
                      <Image
                        source={{ uri: postItem.images[0] }}
                        style={styles.singleImage}
                        resizeMode="cover"
                        onError={(error) => console.error('Image loading error:', error.nativeEvent.error)}
                      />
                    ) : postItem.images.length === 2 ? (
                      <View style={styles.doubleImageContainer}>
                        {postItem.images.map((image, index) => (
                          <Image
                            key={index}
                            source={{ uri: image }}
                            style={styles.doubleImage}
                            resizeMode="cover"
                          />
                        ))}
                      </View>
                    ) : (
                      <View style={styles.moreImagesContainer}>
                        {postItem.images.slice(0, 3).map((image, index) => (
                          <Image
                            key={index}
                            source={{ uri: image }}
                            style={styles.gridImage}
                            resizeMode="cover"
                          />
                        ))}
                        {postItem.images.length > 3 && (
                          <Text style={styles.imageCountText}>
                            + {postItem.images.length - 3}
                          </Text>
                        )}
                      </View>
                    )}
                  </TouchableOpacity>
                </View>
              ) : (
                <Text style={styles.noImagesText}>No images available</Text>
              )}

              Inline Edit/Delete Options
              {selectedPost && selectedPost.id === postItem.id && (
                <View style={styles.inlineMenuContainer}>
                
                  {/* Edit Button */}
                  <TouchableOpacity onPress={handleEdit} style={styles.inlineMenuItem}>
                    <Icon name="pencil" size={20} color="black" /> 
                    <Text style={styles.menuText}>Edit</Text>
                  </TouchableOpacity>
                  
                  {/* Delete Button */}
                  <TouchableOpacity onPress={handleDelete} style={styles.inlineMenuItem}>
                    <Icon name="trash-can" size={20} color="black" /> 
                    <Text style={styles.menuText}>Delete</Text>
                  </TouchableOpacity>

                </View>
              )}
            </View>
          ))}
        </View>
      )}

I attempted to fetch posts from a Supabase database and render them, including associated images.I expected the images, stored as URIs in the postItem.images array, to display correctly in the Image component.