Using React, Images wont display in pdf-lib after merging with a pdf created in @react-pdf/renderer

Question

Using react I need to first generate a pdf with certain details and images. I then need to merge the pages of this pdf with a pre made pdf stored in assets folder. So i do the following:

1. Create pdf using react-pdf
2. Import this and load it using pdf-lib
3. Merge the 2 pdfs using pdf-lib
4. Display the merged pdf in iframe

I create a pdf in react using @react-pdf/renderer which has an image as part of it. Simplified code:

import logo from 'assets/img/logo.jpg';

export default function generatedPdf() {
   return (
       <Document>
        <Page size="A4"  wrap>
           <View>
              <Image style={styles.logo} src={logo}/>
              <View >
                  <Text >Title</Text>
                  <Text >Text</Text>
              </View>
            </View>
         </Page>
       </Document>
   )
}

I then want to merge this with a pre made pdf so i use the library pdf-lib to merge the pages:

import firstPdfPage from '/assets/pdf-first-page.pdf';
import generatedPdf from "./helpers/generatedPdf";

export default function mergePdfs() {
  const [fullPDF, setFullPdf] = useState();

  //load pre made pdf using pdf-lib
  const pdfA = await fetch(generatedPdf).then(res => res.arrayBuffer())
  const pdfALoaded =  await PDFDocument.load(pdfStart);

  // Load the generate pdf from @react-pdf/renderer
  // as far as i can figure out i have to load my generated pdf (1), convert to string(2), then to buffer which is a unit8Array (3) which can then be accepted and loaded by pdf-lib (4)
  const pdfB =  await pdf(thePdf); //1
  const pdfBString = await pdfB.toString() //2
  const pdfBBuffer = Buffer.from(pdfBString); //3
  const pdfBLoaded = await PDFDocument.load(pdfBBuffer); //4

  // merge the 2 together
  const copiedPagesA = await mergedPdf.copyPages(pdfA, pdfA.getPageIndices());
  copiedPagesA.forEach((page) => mergedPdf.addPage(page));
    
  const copiedPagesB = await mergedPdf.copyPages(pdfBBlob, pdfBBlob.getPageIndices());
  copiedPagesB.forEach((page) => mergedPdf.addPage(page));

  //save the merged pdf and set to blob that can be displayed
  const mergedPdfFile = await mergedPdf.save();
  const bytes  = new Uint8Array( mergedPdfFile ); 
  const blob   = new Blob( [ bytes ], { type: "application/pdf" } );
  const docUrl = URL.createObjectURL( blob );
  setFullPDF(docUrl)

  return (
    <iframe src={fullPDF}  width="700" height="1000"/>

  )
}

Apologies for the long code example. I have tried to simplify as much as possible. But to get the 2 react libraries to work together it seems like there is a lot of converting of files/blobs/strings etc to get it to work.

So using this, the pdf displays in the iframe, the only issue is the images in the original pdf that is generated using react-pdf don't display.

I know that they should display because when I use react-pdf's <PDFviewer> without merging pdfs it shows correctly.

Any help is greatly appreciated or alternative approaches to create pdf and then merge with another pdf.