How to show download progress in browser’s built in download manager

I am writing a react web app and I need to download files from presigned S3 urls (or a zip from streamed from Fastapi if need be).

I want use the built in download manager UI that modern browsers have to show the download is in progress, the same way that the AWS S3 Console web app does but I cannot figure it out.

Here’s what I’m looking for…
Download in progress from AWS S3 Console

Here’s my current code…

        for (const asset of data) {
          setCurrentAsset(data.indexOf(asset) + 1);

          const s3Response = await fetch(asset.url);

          if (!s3Response.ok) {
            alert(`Failed to download: ${asset.name}`, );
            break;
          }

          const chunks = [];
          const reader = s3Response.body!.getReader();
          const contentLength = +(s3Response.headers.get('Content-Length'))!;
          let totalDownloaded = 0;

          while (true) {
            const { done, value } = await reader!.read();
            if (done) {
              break;
            }
            chunks.push(value);
            totalDownloaded += value!.length;
            setPercentThrottled(Math.round(totalDownloaded / contentLength * 100));
          }

          const url = window.URL.createObjectURL(new Blob(chunks));
          const a = document.createElement('a');
          a.href = url;
          a.download = asset.name;
          document.body.appendChild(a);
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a);
        }
      }

The assets appear in the download manager after all of the chunks have been streamed in, but I want to see the download as it progresses in the download manager.

Further, my backend is Fastapi. I’ve also used its StreamingResponse class to stream a zip of the assets in one file and that did not solve the problem.