HTML2Canvas not rendering the S3 images

Question

I am trying to download a web page in react. I am using the convention method to convert it into pdf: https://medium.com/@shivekkhurana/how-to-create-pdfs-from-react-components-client-side-solution-7f506d9dfa6d

Now Everything is coming fine except the images.

The code for the same is:

const PrintButton = ({ id, label }) => (
{/* Getting pixel height in milimeters: https://stackoverflow.com/questions/7650413/pixel-to-mm-equation/27111621#27111621 */}
<div
  className="pa2 ba bw1 b--black bg-yellow black-90 br2 dib pointer dim shadow-1"
  onClick={() => {
    setTimeout(() => {}, 10000);
    const input = document.getElementById(id);
    const inputHeightMm = pxToMm(input.offsetHeight);
    const a4WidthMm = 210;
    const a4HeightMm = 297;

    let pdf;

    html2canvas(input, { scrollY: -window.scrollY }).then((canvas) => {
      var imgData = canvas.toDataURL();

      // Document of a4WidthMm wide and inputHeightMm high
      if (inputHeightMm > a4HeightMm) {
        // elongated a4 (system print dialog will handle page breaks)
        pdf = new jsPDF('p', 'mm', [inputHeightMm + 16, a4WidthMm]);
      } else {
        // standard a4
        pdf = new jsPDF();
      }

      pdf.addImage(imgData, 'png', 0, 0);
      pdf.save(`${id}.pdf`);
    });
  }}
>
  {label}
</div>
);

I figured out that it is because of the S3 path of AWS i am using. It seems like it has some security. Can anyone help me on how to remove the security.