React-PDF issues

This is a react question but there does not seem to be a thread for it so hopefully it is ok to post it here. I am really struggling to get the react-pdf package to work in my Next.JS app and was wondering if anyone could help / let me know what is going wrong. I have read numerous github issues and tried multiple different configurations but nothing seems to work.

I have a PDF upload as part of a form and I would like to a preview of the PDF to render in the placeholder that I have created. I have done this successfully for images but it is just not working for whatever reason for the PDF.

The preview component looks like this:

import { Document, Page, pdfjs } from "react-pdf";
import React, { useState } from "react";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

function PdfPreview({ pitchdeck }: { pitchdeck: File }) {
  const [numPages, setNumPages] = useState<number>(0);
  const [pageNumber, setPageNumber] = useState<number>(1);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file={{
          data: pitchdeck,
        }}
        loading={"Please wait i am loading"}
        onLoadSuccess={onDocumentLoadSuccess}
        onLoadError={(error) => console.log(error)}
      >
        <Page pageNumber={pageNumber} />
      </Document>

      <p>
        Page {pageNumber} of {numPages}
      </p>
    </div>
  );
}

export default PdfPreview;

This seems to follow what the docs state to do.

I cant seem to upload any images here but I can assure you that I have a file type coming in and it seems to get stuck in the loading state with no other errors being logged.