I’m using react-pageflip package with react-pdf. However, the PDF file is not rendered in browser.

import React, { useState } from 'react';
import HTMLFlipBook from 'react-pageflip';
import { Document, Page as ReactPdfPage, pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/AnnotationLayer.css';
import 'react-pdf/dist/Page/TextLayer.css';

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

import samplePDF from './sample.pdf';
const width = 400;
const height = width * 1.414;

type pageProps = {
  number: number;
};

const Page = React.forwardRef<HTMLDivElement, pageProps>((props, ref) => {
  return (
    <div ref={ref}>
      <ReactPdfPage pageNumber={props.number} width={width} height={height} />
    </div>
  );
});

export default function FlipBook() {
  const [numPages, setNumPages] = useState<number>();
  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setNumPages(numPages);
  }

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <Document
        file={samplePDF}
        onLoadSuccess={onDocumentLoadSuccess}
        options={{
          cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`,
        }}
      >
        {/* @ts-expect-error ignore HTMLFlipBook types */}
        <HTMLFlipBook
          width={width}
          height={height}
          showCover={true}
          mobileScrollSupport={true}
          maxShadowOpacity={0.5}
          style={{ marginInline: 'auto' }}
        >
          {Array.from(new Array(numPages), (el, index) => (
            <div key={index}>
              <Page number={index + 1} />
            </div>
          ))}
        </HTMLFlipBook>
      </Document>
    </div>
  );
}

Using <Page number={1} /><Page number={2} /> ... instead of {Array.from ...} works fine.
And I also confirmed it rendered correctly when not using react-pageflip package.

Do you have any solution?