How to append a blob to formData when looping through maps() function

I'm curious why this happens when I use await to get a blob from a data url, append it to a formData, inside of a map() function

Long story short I need to convert all image data urls into a blob, and then append them to a form data, then send the form data every time someone hits submit.

Everytime I hit submit, and I add an image, the first image vanishes from the formData after I've appended:

//executes on every form submission, so if there are two images in the form then I should have two blobs attached, Image 0, and Image 1, but instead the first image vanishes, why does that happen? 
//if images exist
     if(urls){
        const blobs = urls.map(async (url, index)=>{

        console.log('current url index: ', index)

        //remove double quotes
        const sliced = url.slice(1,-1)


        //blob lines are causing an image to vanish
        const res = await fetch(sliced); 

        const blob = await res.blob(); 

        formData.append(`image ${index}`, blob);


         if(index==urls.length-1){
             console.log([...formData]) //send form data to server here
         }  
})  

Via Active questions tagged javascript - Stack Overflow https://ift.tt/W2YnC0x