画像が投稿できる簡易的なアプリで投稿した際に双方向通信で別ブラウザにも即時表示したい

画像が投稿できる簡易的なチャットアプリを作成したい

画像を添付したメッセージを投稿し、投稿した際に双方向通信で投稿時に別ブラウザにも画像とメッセージを表示したい

前提

JavaScriptで画像投稿ができるTeamsの様な簡易的なチャットアプリをを作っています。

発生している問題・エラーメッセージ

AmplifyのGrapthQL API を使用して双方向通信を実装していますが
画像を添付したメッセージを投稿した際、別ブラウザでは文字列は投稿した瞬間に表示されるが画像が即時表示されずに困っております。

【投稿したブラウザ】

【別ブラウザ】

該当のソースコード

  useEffect(() => {
    fetchData();

    // 新しいメッセージが追加された際のsubscriptionの設定。
    // onCreateChatMessageイベントがトリガーされたときに発火。
    const subscription = API.graphql(
        graphqlOperation(onCreateChatMessage)
      // subscribeはgraphql APIでの双方向通信の決まり（subscription(リード処理), query(リード処理), mutation(更新処理)）
      // 何かアクションがあるのを待機している（Graph QLの変更の通知を待っている）
    ).subscribe({
        // 変更があった場合{ value }に値（入力された値）が入ってくる
        next: async ({ value }) => {
          const newMessage = value.data.onCreateChatMessage;
          console.log("新しいメッセージ", newMessage)
          // 新しいメッセージの関連画像のURLを取得
          console.log("双方向通信で取得した画像:", newMessage.Images.items)
          if (newMessage.Images && newMessage.Images.items.length > 0) {
            await Promise.all(newMessage.Images.items.map(async (imageItem) => {
              try {
                const url = await Storage.get(imageItem.image);
                setImageURLs(prev => ({ ...prev, [imageItem.image]: url }));
              } catch (err) {
                console.error("Error fetching image URL:", err);
              }
            }));
          }
          
          setChatMessages(prevMessages => [...prevMessages, newMessage]);
        },
        error: error => console.error(error)
      });

    // メッセージが削除された際のsubscriptionの設定。
    // onDeleteChatMessageイベントがトリガーされたときに発火。
    const deleteSubscription = API.graphql(
        graphqlOperation(onDeleteChatMessage)
    ).subscribe({
        next: ({ value }) => {
            // { value }から新しいメッセージを取得
            const deletedMessageId = value.data.onDeleteChatMessage.id;
            setChatMessages(prevMessages =>
                // prevMessages=現在のメッセージリスト(テスト１〜４), newMessage=新しいメッセージを除去。
                prevMessages.filter(message => message.id !== deletedMessageId)
            );
        },
        error: error => console.error(error)
    });

    // useEffectのクリーンアップ関数。
    // コンポーネントがアンマウントされるときに、subscriptionを終了。
    return () => {
        subscription.unsubscribe();
        deleteSubscription.unsubscribe();
    };

  }, []);

subscription.js
1export const onCreateChatMessage = /* GraphQL */ `
2  subscription OnCreateChatMessage(
3    $filter: ModelSubscriptionChatMessageFilterInput
4  ) {
5    onCreateChatMessage(filter: $filter) {
6      id
7      message
8      Images {
9        items {
10          id
11          image
12          chatmessageID
13          createdAt
14          updatedAt
15          __typename
16        }
17        nextToken
18        __typename
19      }
20      createdAt
21      updatedAt
22      __typename
23    }
24  }
25`;

試したこと

双方向通信部分の
console.log("双方向通信で取得した画像:", newMessage.Images.items)
でnewMessageはの中身を見たところ、投稿した文字列は取得できている様であるがファイル名は取得できてないようで、双方向通信の処理が走るまでに画像が保存できていないのではないかと仮説を立てていますが、うまくいかず困っております。

補足情報（FW/ツールのバージョンなど）

"@aws-amplify/storage": "^5.9.4",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^13.5.0",
"aws-amplify": "^5.3.10",
"aws-amplify-react": "^5.1.43",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-image-file-resizer": "^0.4.8",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

もしお分かりの方がいらっしゃいましたら、ご教示お願い致します。

よろしくお願い致します。