Downloading a as a PNG gets renamed to .txt in iOS, works on everything else. What gives?

Question

I have this code in a project:

      // Create a new canvas based on the Map canvas
      const canvas: HTMLCanvasElement = document.createElement("canvas");

      canvas.width = mapRef.current?.getCanvas().width;
      canvas.height = mapRef.current?.getCanvas().height;

      // Draw map on new canvas
      const context = canvas.getContext("2d");
      context?.drawImage(mapRef?.current?.getCanvas() as HTMLCanvasElement, 0, 0);

      // Draw legend on new canvas
      if (showLegend) {
        const legend = legendRef.current;
        await html2canvas(legend as HTMLElement, { canvas, scale: legendScale });
      }

      // Download map with legend
      const a = document.createElement("a");
      a.href = canvas.toDataURL("image/png");
      a.download = "map.png";
      a.click();
      a.remove();

      // Download data sheet
      const dataSheet = tableRef.current;
      const dataSheetCanvas = await html2canvas(dataSheet as HTMLElement);

      const data = dataSheetCanvas.toDataURL("image/png");
      const link = document.createElement("a");

      if (typeof link.download === "string") {
        link.href = data;
        link.download = "data-sheet.png";

        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        window.open(data);
      }

It is supposed to download 2 images, one generated from a Map that lives in a canvas element, and the other generated from a table containing a data sheet.

Everything works fine on all OSes, but on iOS (iphone12) + safari, the first file gets .txt appended to its name, thus being downloaded as map.png.txt, which confuses users and makes them think the download is not working (file contents are correct, if renamed to remove the txt extension it works)

Weird thing is that the second image (data-sheet) generated by HTML2Canvas gets downloaded just fine.

Any tips?