On the backend side, I call the charts from the sheet using

const charts = analytics.getCharts();

I then iterate through the charts using the code:

charts.forEach(function (chart, i) {
      chartBlobs[i] = chart.getAs('image/png').getDataAsString();
    });

I then return chartBlobs to the react frontend.

At the React Frontend, I receive the blobs using the code:

google.script.run.withSuccessHandler(setSheetCharts).getChartsFromSheet();

wrapped inside a use effect.

setSheetCharts is a function that sets the state of charts:

    const [charts, setCharts] = useState([]);
    const [loading, setLoading] = useState(true);
    const setSheetCharts = (vn) => {
        console.warn(vn)
        setCharts(getBase64ImageSrc(vn));
        setLoading(false);
    }

Since I return it as a blob. I have to now parse this blob. getBase64ImageSrc achieves this:

function getBase64ImageSrc(pngblobs) {
    console.warn(pngblobs);
    const imgSrcs = pngblobs.map((pngstring) => {
        const base64ImageString = Buffer.from(pngstring, 'binary').toString('base64');
        const srcValue = `data:image/png;base64,${base64ImageString}`;
        return srcValue;
    });
    console.warn(imgSrcs);
    return imgSrcs;
}
    console.warn(imgSrcs);
    return imgSrcs;
}

Now that charts has the src data, I just wrap it inside a dive and return:

<div>
    {charts.map((chart, index) => (
        <img key={index} src={chart} alt={`chart-${index}`} />
    ))}
</div>

But for some reason, the image fails to parse.
Here are the results at different points:

An array is received at the client side:

0:"�PNGrnu001anu0000u0000u0000rIHDRu0000....
1:"�PNGrnu001anu0000u0000u0000rIHDRu0000....

How the getBase64ImageSrc parses and returns the srcs:

0:"data:image/png;base64,/VBORw0KGgoAAAANSUhEUgAAAyY..."
1:"data:image/png;base64,/VBORw0KGgoAAAANSUhEUgAAAyY..."

Seems fine to me, yet the image is not parsed properly..

Can anyone see what I am doing wrong here?