Why does does my Blob come up as empty when the data is being pass through?

Ok. I have this code:

const response = await fetch(source, {
            headers: {
                "Content-Type": "application/octet-stream",
            },
        });

        
 const usableThumbnailData = await response.blob();

This frontend code essentially makes a request to an Express server (backend) that I have. The incoming data is an Array Buffer that then gets resolved as a Blob on the frontend.

The blob is then converted to a Data URL and painted to the browser, code shown below:

paintImg = document.createElement("img"); //creates img element
        
paintImg.setAttribute("src", URL.createObjectURL(usableThumbnailData)); //creates data URL from blob and adds it as the src attribute of the img element

paintImg.setAttribute("height", `${height}`); //sets height of the img element

paintImg.setAttribute("width", `${width}`); //sets width of the img element

    
postContainer.append(paintImg); //puts img element into it's appropriate place on the browser document

The problem is that whenever the first Array Buffer comes in, the Blob comes up empty, but when the request is sent again, the first Blob paints where the new Blob should. Then, for every new request, the previous Blob gets painted where the new Blob should. There is a sort of Blob “lag”. Does anyone know why this might be happening?

I have tried everything that I can think of. Too complex to write in brief.