I have a socket.io connection for a chat app that i can use to share files(images) and text, the problem is although the images are being stored correctly, they don’t reflect in the messages on less i refresh.
Here is a snapshot of image

  // client side
const sendMessage = async () => {
    if (myMessage.trim() === "" && !file) return;
  
    const messageObj: any = {
      sender: userId,
      receiver: currentMessage,
      message: file ? file : myMessage,
      ...(file ? { type: "file", fileName: file.name, mimeType: file.type } : {}),
    };
  
    console.log("Sending message:", messageObj);
    socket.emit("sendMessage", messageObj);
    setMymessage("");
    setFile(null);
  };
useEffect(() => {
    const handleReceiveMessage = (message: Message) => {
      console.log("New message received:", message);
  
      setChats((prevChats) => {
        if (prevChats && prevChats._id === message.conversationId) {
          const updatedMessages = [...(prevChats.messages || []), message];
          return { ...prevChats, messages: updatedMessages };
        }
        return prevChats;
      });
    };
  
    socket.on("receiveMessage", handleReceiveMessage);
  
    return () => {
      socket.off("receiveMessage", handleReceiveMessage);
    };
  }, [socket]);

and the server side

io.on('connection', (socket) => {
....
socket.on('sendMessage', async (messageDetails) => {
    try {
        const sender = new mongoose.Types.ObjectId(messageDetails.sender);
        const receiver = new mongoose.Types.ObjectId(messageDetails.receiver);


        // Send the message back to the frontend
        let messageData = newMessage.toObject();
        
        if (newMessage.type === 'image') {
            const base64Image = newMessage.message.toString('base64');
            messageData.message = `data:${newMessage.mimeType};base64,${base64Image}`;
        }
        // Emit the new message to all users in the conversation
        io.to(conversation._id.toString()).emit('receiveMessage', messageData);

    } catch (error) {
        socket.emit('error', { error: 'Failed to send message' });
    }
...

});

Trying to get the image to work without having to refresh.