How to render multiple Base64 images in the table

I have to render base64 images for avatar due to privacy issues, all promises for thumbnails are being resolved correctly but base64 images don't render properly from the browser memory cache.

Strangely, it does show up all base64 after re-render (when I click the sort icon, it doesn't trigger re-fetch).

And one more item appears from the network tab. I don't have any idea why.

Could you help me to render all images in base64 format properly?

Here's code snippet.

uniqueReferrals.forEach(({ gpReferralUuid, state }, idx) => {
        if (gpReferralUuid && state !== "hqSent") {
          healthQuestionnaireReviewService
            .getPatientThumbanils(gpReferralUuid)
            .then((res) => {
              const { hasPhotos } = res;

              if (hasPhotos) {
                const frontThumbnail = res.photos.frontThumbnail;
                uData[idx].avatar = frontThumbnail;
                setReferralSummary(uData);
              }
            })
            .catch((error) => {});
        }
      });

<tr>
<td>
<Avatar
    className={classes.avatar}
    src={row.avatar}
    alt="Thumbnail"
/>