HTML-To-Image doesn’t include images on mobile [duplicate]

I am trying to generate an image and download it to the client’s device when a button is clicked. The generateImage function is called on click. It works fine on a desktop browser and generates an image from the React component including all elements in the component. This component has some text an SVG component and a few images imported from a local directory. But the issue is, on mobile devices and safari desktops, it doesn’t include the images that are rendered in the component. Images are hosted locally, so it is not a CORS issue, also images are completely loaded to the component (I’ve checked this). Lastly, I tried converting images to base64 but still, they are not in the generated image. Here is the function:

import { toPng } from "html-to-image";
  
 const generateImage = () => {
    return new Promise((resolve, reject) => {
      dispatch({ type: "SHOW_TOOLTIP", payload: false });

      const node = document.getElementById("share-content");
      node.style.display = "block";

      const images = Array.from(node.getElementsByTagName("img"));
      const loadedImages = images.map((img) => {
        if (img.complete) return Promise.resolve();
        return new Promise((resolve, reject) => {
          img.onload = resolve;
          img.onerror = reject;
        });
      });

      Promise.all(loadedImages)
        .then(() => {
          return toPng(node);
        })
        .then((dataUrl) => {
          const link = document.createElement("a");
          link.download = "image.png";
          link.href = dataUrl;
          link.click();

          node.style.display = "none";
          dispatch({ type: "SHOW_TOOLTIP", payload: true });
          resolve();
        })
        .catch((error) => {
          console.error("oops, something went wrong!", error);
          node.style.display = "none";
          dispatch({ type: "SHOW_TOOLTIP", payload: true });
          reject(error);
        });
    });
  };