I'm creating this component that allows the user to send a single or multiple image using socket io. But I'm having this problem on how can iterate into FileList that can be use as a blob then pass into FileReader to be readAsDataURL?

Function for upload images

const handleOnUploadChat = (e) => {
    let fileArr = Array.from(e.target.files);
    setUploadImgChat(fileArr);
  };

Function to send message

const handleSendMessage = (e) => {
    e.preventDefault();

    if (newMessage) {
      const messageData = {
        conversationId: currentConversationInfo._id,
        senderId: currentAccountInfo._id,
        messageText: newMessage.messageText,
      };

      // dispatch(registerMessage(messageData));

      socket?.emit('sendMessage', {
        senderId: currentAccountInfo,
        receiverId: currentConversationInfo.members.find(
          (id) => id !== currentAccountInfo._id
        ),
        message: newMessage.messageText,
        imagesFilename: uploadImgChat.map((file) => file.name),
        imagesFileType: uploadImgChat.map((file) => file.type),
        images: uploadImgChat.map((file) => file),
      });


      setCurrentMessage((currentMessage) => [
        ...currentMessage,
        { senderId: currentAccountInfo, messageText: newMessage.messageText },
      ]);
    }
  };

Function get message

socket.on('getMessage', (data) => {
          const blob = new Blob([data.images], { type: data.imagesFileType });
          const reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = function () {
            setReceiveImg(reader.result);
          };

          setArrivalMessage({
            senderId: data.accountId,
            messageText: data.message,
            messageImg: receiveImg,
            createdAt: Date.now(),
          });
        });