react pdf autosize with react window

react-pdf.tsx

import React, {
  useEffect,
  useId,
  useMemo,
  useState,
  CSSProperties,
} from "react";
import AutoSizer from "react-virtualized-auto-sizer";
import { asyncMap } from "@wojtekmaj/async-array-utils";
import { VariableSizeList as List } from "react-window";
import { PDFDocumentProxy, PageViewport } from "pdfjs-dist";
import { Document, Page } from "react-pdf";

function FileCard({ url }) {
  const [pdf, setPdf] = useState<PDFDocumentProxy | null>(null);
  const [pageViewports, setPageViewports] = useState<PageViewport[] | null>(
    null
  );

  function getPageHeight(pageIndex: number) {
    if (!pageViewports) {
      throw new Error("getPageHeight() called too early");
    }

    const pageViewport = pageViewports[pageIndex];
    const scale = 600 / pageViewport.width;
    const actualHeight = pageViewport.height * scale;

    return actualHeight;
  }

  function onDocumentLoadSuccess(nextPdf: PDFDocumentProxy) {
    setPdf(nextPdf);
  }

  return (
    <div>
      <AutoSizer style={{ height: "100%", width: "100%" }}>
        {({ height, width }) => {
          return (
            <Document file={url} onLoadSuccess={onDocumentLoadSuccess}>
              {pdf && pageViewports && (
                <List
                  style={{ overflowX: "hidden" }}
                  width={width}
                  height={height}
                  estimatedItemSize={800}
                  itemCount={pdf.numPages}
                  itemSize={getPageHeight}
                  itemData={{ height: 800, width: 600 }}
                >
                  {Row}
                </List>
              )}
            </Document>
          );
        }}
      </AutoSizer>
    </div>
  );
}

function Row({
  index,
  style,
  data,
}: {
  index: number;
  style: CSSProperties;
  data: {
    height: number;
    width: number;
  };
}) {
  return (
    <div style={style}>
      <Page
        width={data.width}
        height={data.height}
        pageIndex={index}
        renderAnnotationLayer={false}
        renderTextLayer={false}
      />
    </div>
  );
}