I am building an application on react-native expo , now I am facing this error everytime I try to upload an image, I get the Uploading image and showing it on gallery.jsx as normal gallery. Server side is working perfectly but on client side I am getting this error

Gallery.jsx:

import React, { useState } from 'react';
import { View, Text, Image, TouchableOpacity, ScrollView } from "react-native";
import * as ImagePicker from 'expo-image-picker';
import { useGlobalContext } from '../context/GlobalProvider';
import { channelApi } from '../../api/channelApi';

const Gallery = () => {
  const [selectedImages, setSelectedImages] = useState([]);
  const { user, currentEvent } = useGlobalContext();

  const handleUploadImage = async () => {
    try {
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      if (status !== 'granted') {
        console.log('Permission to access media library denied');
        return;
      }

      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsMultipleSelection: true,
        aspect: [4, 3],
        quality: 1,
      });

      if (!result.canceled) {
        const newImages = result.assets;
        setSelectedImages([...selectedImages, ...newImages]);

        for (const asset of newImages) {
          const formData = new FormData();
          formData.append('image', {
            uri: asset.uri,
            name: asset.fileName || 'photo.jpg',
            type: asset.type || 'image/jpeg',
          });

          try {
            const response = await channelApi.uploadImage(currentEvent.imageChannelId, formData, user.token);
            console.log('Image upload response:', response.data);
          } catch (error) {
            console.error('Error uploading image:', error);
          }
        }
      }
    } catch (error) {
      console.log('Error occurred while launching image picker:', error);
    }
  };

  return (
    <View className="flex-1 mt-8">
      <Text className="text-xs font-light text-center">Wedding Day</Text>
      <Text className="text-2xl font-bold text-center mb-4">Gallery</Text>
      <ScrollView contentContainerClassName="p-4">
        <View className="flex-row flex-wrap bg-[#F9DCC4] justify-between rounded-lg mx-2">
          {[...selectedImages].map((image, index) => (
            <View key={index} className="w-1/4 p-1">
              <Image
                source={typeof image === "number"
                  ? image
                  : image.uri
                  ? { uri: image.uri }
                  : require("../../assets/images/weddingimage.png")
                }
                className="w-full h-20 rounded-lg"
                resizeMode="cover"
              />
            </View>
          ))}
        </View>
      </ScrollView>

      <TouchableOpacity
        className="bg-[#FFAD65] mt-6 px-6 py-3 w-100 mb-6 rounded-md mx-4"
        onPress={handleUploadImage}
      >
        <Text className="text-white text-center font-bold text-lg">
          UPLOAD IMAGE
        </Text>
      </TouchableOpacity>
    </View>
  );
};

export default Gallery;

ChannelApi.jsx:

export const channelApi = {
    getAllChannels: async (eventId, token) => {
        updateTokenInHeaders(token)
        return await axiosConfig.get(`/channel/${eventId}`)
    },

    createChannel: async (data, token) => {
        updateTokenInHeaders(token)
        return await axiosConfig.post("/channel", data)
    },

    uploadImage: async (imageChannelId, data, token) => {
        updateTokenInHeaders(token)
        changeContentTypeToMultipart()
        return await axiosConfig.post(`/image/${imageChannelId}`, data)
    },
    getImages: async (imageChannelId, token) => {
        updateTokenInHeaders(token)
        return await axiosConfig.get(`/image/${imageChannelId}`)
    }
}`

axiosConfig.jsx:

import axios from "axios";

const axiosConfig = axios.create({
    baseURL: "https://abc.onrender.com/",
    withCredentials: true,
    headers: {
        "Content-Type": "application/json"
    },
});

const updateTokenInHeaders = (token) => {
    axiosConfig.defaults.headers.common["Authorization"] = `Bearer ${token}`                
}

const changeContentTypeToMultipart = () => {
    axiosConfig.defaults.headers.common["Content-Type"] = "multipart/form-data"
}

module.exports = {
    axiosConfig,
    updateTokenInHeaders,
    changeContentTypeToMultipart
} 

GlobalProvider.jsx

import { createContext, useContext, useState, useEffect } from 'react'

export const GlobalContext = createContext()

export const useGlobalContext = () => useContext(GlobalContext)

export const GlobalProvider = ({ children }) => {

    // user states and setters

    const [isLoggedIn, setIsLoggedIn] = useState(false)
    const [user, setUser] = useState(null) 
    const [isLoading, setIsLoading] = useState(true)

    const blankUser = {
        name: '',
        email: '',
        phone: '',
        avatar: '',
        _id: '',
        token: ''
    }

    useEffect(() => {
        setUser(blankUser)
    }, [])

    useEffect(() => {
        console.log("From global provider: ", user)
    }, [user])

    const setUserContext = (userData) => {
        setUser(userData);
        setIsLoggedIn(true);
    };

    // event states and setters

    const [events, setEvents] = useState([])
    const [currentEvent, setCurrentEvent] = useState(null)

    const blankEvents = []
    const blankCurrentEvent = {
        name: '',
        role: '',
        channels: [],
        meetings: [],
        date: '',
        _id: ''
    }

    useEffect(() => {
        setEvents(blankEvents)
        setCurrentEvent(blankCurrentEvent)
    }, [])

    useEffect(() => {
        console.log("From global provider (events): ", events)
    }, [events])

    useEffect(() => {
        console.log("From global provider (currentEvent): ", currentEvent)
    }, [currentEvent])

    return (
        <GlobalContext.Provider 
            value={{
                isLoggedIn,
                setIsLoggedIn,
                user, 
                setUser,
                isLoading,
                setUserContext,
                events,
                setEvents,
                currentEvent,
                setCurrentEvent,
            }}
        >
            {children}
        </GlobalContext.Provider>
    )
}

I am expecting the image to be uploaded and shown as per below image