How to download a QR code generated using react-qrcode-logo with an image from Firebase?

Question

I am using the react-qrcode-logo library in my React project to generate a QR code. The QR code includes an image that is stored in Firebase. Here is my code:

import { QRCode } from "react-qrcode-logo";

<QRCode
  value={`http://localhost:3000/qrscan/${type}/${profile}`}
  logoImage={img}
  fgColor={color}
  ecLevel="Q"
  removeQrCodeBehindLogo="2"
  size="110"
  logoWidth="29"
  logoHeight="29"
  logoOpacity="3"
  logoPaddingStyle="circle"
  logoPadding="3"
/>

I want to enable the user to download this QR code when they click a button. How can I achieve this functionality? I would like the downloaded QR code to include the image from Firebase.

I would appreciate any guidance or code samples on how to implement this feature.

Thank you!

I tried doing this:

  const qrCodeRef = useRef(null);
  const downloadQR = () => {
    const qrCodeDiv = qrCodeRef.current;

    domtoimage.toPng(qrCodeDiv).then((dataURL) => {
      const link = document.createElement("a");
      link.download = "qrCode.png";
      link.href = dataURL;

      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };

but as the image url has a different domain it is not getting downloaded