I've an SVG image that includes two PNG images that makes them one SVG image, now I want to convert this image into PNG/JPG. I've the following code of SVG in react:

import P1 from "../../assets/P1.png";
import P2 from "../../assets/P2.png";

<canvas id="imageCanvas" width="321" height="469"></canvas>
<img id="imageR"  ></img>
<svg id="imageCard" name="imageCard" width="321" height="469" xmlns="http://www.w3.org/2000/svg">
     <image href={P2} width="321" height="469" />
     <image href={P1} x="93" y="151" width="48" height="48" />
</svg> 

It showing the proper result in the browser, now I want to convert this svg image to PNG/JPG format, I've tried an solution to convert this image to canvas first and then to PNG:

var svg = document.querySelector('svg');
var img = document.querySelector('#imageR');
var canvas = document.querySelector('#imageCanvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64;charset=utf-8,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function () {
      // draw the image onto the canvas
      canvas.getContext('2d').drawImage(img, 0, 0);
    }
ImageBase64 = image64;

img.src = image64;

but it is not work properly, it only works if I don't use image tag inside the SVG, please guide me, thank you.