Html-to-image in NextJS not working properly, downloaded the same reference

I've been having some trouble with html-to-image library, inside a Next.js project. This is the code I used for converting image with html-to-image

import Image from "next/image";
import {toPng} from 'html-to-image'

const divReferenceA = useRef(null);
const divReferenceB = useRef(null);
const [type, setType] = useState(true)

const convertDivToPng = async div => {
    const data = await toPng(div, {
      cacheBust: true,
      canvasWidth: 842,
      canvasHeight: 595,
    });
    return data;
  };

const handleDownloadA = async e => {
    try {
      const data = await convertDivToPng(divReferenceA.current);
      if (data) {
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image A.png";
        link.click();
      }
    } catch (e) {
      console.log(e, "ini error sertifikat");
    }
  };

const handleDownloadB = async e => {
    try {
      const data = await convertDivToPng(divReferenceB.current);
      if (data) {
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image B.png";
        link.click();
      }
    } catch (e) {
      console.log(e, "ini errornya");
    }
  };

return (
    <div ref={divReferenceA}> {... content with <Image /> from next-image }</div>
    <button onClick={e => handleDownloadA(e)}>
        Download
    </button>
    {type == true ? (
        <div className="position-relative p-0 d-flex" ref={divReferenceB}> 
            {... content with <Image /> from next-image but different image from refA }</div>
        <button onClick={e => handleDownloadB(e)}>
            Download
        </button>
    ) : <div> </div>

My problem is when I load the page and I click download button for the divRefferenceA, I will successfully convert and download the whole div. However, when I clicked download button for divRefferenceB after, I will download the div of the divRefferenceA again. But when I console.log(divRefferenceB.current) it shows the divRefferenceB as expected.

So I reload the page again, I press the divRefferenceB download button, I will successfully convert and download the whole div of divRefferenceB, but after I press download button for the divRefferenceA, I will download the divRefferenceB. So I'm guessing that every time I download something for the first time, the dataURL will stick around unless I reload the pages. Not sure wha'ts happening.

However, I experiment something. I created another div inside my pages:

const testRef = useRef(null)

const handleDownloadTest = async e => {
    try {
      const data = await convertDivToPng(testRef.current);
      if (data) {
        const link = document.createElement("a");
        link.href = data;
        link.download = "Image B.png";
        link.click();
      }
    } catch (e) {
      console.log(e, "ini errornya");
    }
};

<div ref={testRef}>
   <div>a</div>
   <div>a</div>
   <div>a</div>
</div>

The problem doesn't happen when I download this div and worked as expected. I'm so confused. Is there any problem with nextImage? I'm not sure what's happening. Been trying this and that for 2 days, but can't fix the problem.

===================PROBLEM SOLVED!===================

its turned out that i haved some problems with cors that were not set within the backend environment that i did not aware of. the reason i found this error is that i tried to directly fetch the image using

const data = await axios.get('s3-bucket-api')
if(data){
  console.log(data)
}

then i got error response about the cors related problem. later on we tried to tweak the backend environment and the problem were solved