How to watermark PDFs utilizing pdf-lib and Next.js

[d606n6k]

Hi all! I am unsure if this is the right place to ask this question but I have been stumped trying to find a solution for what I am working on.
I have a Next.js application and I have existing pdf files in the /public directory. I want to create a component that can be reusable sitewide. I want to watermark these existing pdfs with the currently logged-in Company Name. I am getting the 'Error: Expected instance of PDFDict, but got an instance of undefined' error when my render tries to get the pages from the loaded pdf document. Has anyone had to tackle this task before in a Next.js environment? Here is my component file:

import React, { useEffect, useRef, useState } from 'react';
import { degrees, PDFDocument, rgb, StandardFonts } from 'pdf-lib';


const PDFViewer = ({ filePath }) => {
  const [pdfData, setPdfData] = useState(null);

  useEffect(() => {
    const loadAndDisplayPDF = async () => {
      try {
        const response = await fetch(filePath);
        const pdfBytes = await response.arrayBuffer();
        const pdfDoc = await PDFDocument.load(pdfBytes, { ignoreEncryption: true });
        setPdfData(pdfDoc);
      } catch (error) {
        console.error('Error loading PDF:', error);
      }
    };

    loadAndDisplayPDF();
  }, [filePath]);

  return (
    <div>
      {pdfData ? (
        <div>
          {/* Display the first page of the PDF */}
          {pdfData.getPages(0).then((page) => (
            <iframe
              title="Test PDF Display"
              src={page.render()}
              type="application/pdf"
            />
          ))}
        </div>
      ) : (
        <div>Loading PDF...</div>
      )}
    </div>
  );
};

export default PDFViewer;