Zip all image url in file folder by using jsZip and file-saver in react

Question

I am trying to Generating a zip folder using this tutorial and in my component i have added it as

const siteImageData = [
      { fileUrl: 'https://saseuwdevattachmentapi.blob.core.windows.net/generic-final-container/1017f445-6833-4ca5-bb4d-eec994a4c622.jpg', fileName: 'test_1.png' },
      { fileUrl: 'https://saseuwdevattachmentapi.blob.core.windows.net/generic-files-container/c47136a4-d323-408b-b82b-3367226272a0.jpg', fileName: 'test_2.png' }
    ];

  const downloadResourcesOnClick = async () => {
      const zip = new JSZip();
      const remoteZips = siteImageData.map(async (file) => {
        const imageBlob = await fetch(file.fileUrl, {
          mode: 'no-cors',
          headers: {
            'Access-Control-Allow-Origin': '*',
          },
        }).then(response => response);;
        const imageFile = new File([imageBlob], file.fileName + ".jpg");
        zip.file(`${file.fileName}.jpg`, imageFile);
      });

      //callback promise
      Promise.all(remoteZips)
        .then((result) => {
          console.log('result', result)
          zip.generateAsync({ type: 'blob' }).then((blob) => {
            // give the zip file a name
            saveAs(blob, 'sitePhoto-zip-download.zip');
          });
        })
        .catch(() => {
        });
    };

  <Button
                  variant="outlined"
                  onClick={downloadResourcesOnClickTest}
                 
                >
                  DOWNLOAD PHOTOS
                </Button>

But when i am trying to zip it , its generating a folder with images file but that images are not loading and having a size 0kb , can you please help me with it.

Image url trying to fetch above are real in siteImageData array.

I am expecting a zip folder with all the urls images should be in it and it can be open in photo viewer.

please help me to all images should be loading properly.

in response i am getting a application/octet-stream type file.