Incomplete or corrupt PNG file react-pdf

Question

I am having problems adding an image to my PDF using the react-pdf library https://react-pdf.org.

I keep getting the error:

Incomplete or corrupt PNG file

The image displays fine in other parts of my app so I know the base64 that is generated is ok.

I am using

<Image
    src={`data:image/png;base64,${base64ResourceFile.Base64}`}
/>

I can see by console logging that the correct base64 value is being returned from the API I'm pulling the image from with:

const resourceFiles = async ({ data = [], identityAccessKey, resourceID }) => {
  const resourceFilesWithBase64 = await Promise.all(
    data.map(async (file) => {
      const response = await fetch('/api/getIdentityResourceFileById', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ fileID: file?.id, identityAccessKey, resourceID })
      });
      const fileContent = await response.json();
      return {base64: fileContent?.base64};
    })
  );
  return resourceFilesWithBase64;
};

export default resourceFiles;

I then use the above method before passing the base64 into the component that uses the <Image> component from react-pdf

const base64ResourceFile = await resourceFiles({
            data: resource_files,
            identityAccessKey: dataVerification?.idv?.data[0]?.idvKey,
            resourceID: id
}).catch(console.error);

<Image
    src={`data:image/png;base64,${base64ResourceFile.base64}`}
/>

The error seems to be in fetchimage.js

Has anyone encountered this before?