Rendering a blank/black page when the page dimensions are different

[tulioFcastro]

I'm using react-pdf: 9.2.1, pdfjs-dist: 4.8.69, node: 20.16.0 and npm: 10.8.1.
I have a pdf file with 3 pages, the first and the last are equals, de second one is less on width and height.
I'm using a URL link for the pdf.

the versions react-pdf: 7.7.3 and pdfjs-dist: 3.11.174 works very well:

the code:

import styled from '@emotion/styled';
import { PageViewport, PDFPageProxy } from 'pdfjs-dist';
import { useState } from 'react';
import { Document, DocumentProps, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/TextLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();

const options: DocumentProps['options'] = {
  cMapUrl: '/cmaps/',
  standardFontDataUrl: '/standard_fonts/',
};

const PDFDocumentWrapper = styled.div`
  width: 100%;
  max-width: 794px;
  min-width: 794px;
  overflow: auto;
  height: 100%;
  > div,
  > div > div {
    height: 100%;
  }

  canvas {
    width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
  }
`;

const PagesContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 8px;
`;

export type PDFRenderProps = DocumentProps;
export const PDFRender = (props: PDFRenderProps) => {
  const [numPages, setNumPages] = useState<number>();
  const [pageDimensions, setPageDimensions] = useState<PageViewport[]>([]);

  const onDocumentLoadSuccess: DocumentProps['onLoadSuccess'] = pdf => {
    setNumPages(pdf.numPages);
    const dimensions: { width: number; height: number }[] = [];
    void pdf.getPage(1).then((page: PDFPageProxy) => {
      const viewport = page.getViewport({ scale: 1 });
      dimensions.push(viewport);
    });

    void Promise.all(
      Array.from({ length: pdf.numPages }, (_, index) =>
        pdf.getPage(index + 1).then((page: PDFPageProxy) => {
          const viewport = page.getViewport({ scale: 1 });
          return viewport;
        })
      )
    ).then(dims => setPageDimensions(dims));
  };

  return (
    <PDFDocumentWrapper>
      <Document {...props} onLoadSuccess={onDocumentLoadSuccess} options={options}>
        <PagesContainer>
          {Array.from(new Array(numPages), (_, index) => (
            <div
              key={`page_${index + 1}`}
              style={{
                position: 'relative',
                ...(pageDimensions[index] && {
                  width: `${pageDimensions[index].width}px`,
                  height: `${pageDimensions[index].height}px`,
                }),
              }}>
              <Page pageNumber={index + 1} renderTextLayer={false} renderAnnotationLayer={false} scale={2} />
            </div>
          ))}
        </PagesContainer>
      </Document>
    </PDFDocumentWrapper>
  );
};

export default PDFRender;