My component receives a file object and uses react-pdf to render it inside a div. The way it’s right now, it only displays the first page, because I have set the value so. Of course, I want to make it so it displays the whole file. This is what I’m trying:

/* eslint-disable @typescript-eslint/no-unused-vars */

import { Document, Page, pdfjs } from "react-pdf"
import { useState, useEffect, useCallback } from "react"
import SimpleBar from "simplebar-react"

pdfjs.GlobalWorkerOptions.workerSrc = `//${pdfjs.version}/pdf.worker.min.js`

interface PaperViewerProps {
  file: any

function PaperViewer({ file }: PaperViewerProps) {
  const [numPages, setNumPages] = useState()
  const [pageNumber, setPageNumber] = useState(1)
  const [arrayBuffer, setArrayBuffer] = useState<ArrayBuffer | null>(null)

  useEffect(() => {
    // Ensure file is a valid PDF
    if (!file || file.type !== "application/pdf") {
      return // Handle invalid file

    const fileReader = new FileReader()
    fileReader.onload = (event) => {
      const receivedArrayBuffer =
      setArrayBuffer(receivedArrayBuffer as ArrayBuffer)
  }, [file])

  const onDocumentLoadSuccess = ({ numPages }) => {

  return (
      {arrayBuffer && (
        <div className="w-full rounded-md shadow flex flex-col items-center">
          <div className="flex-1 w-full max-h-screen">
            <SimpleBar autoHide={false} className="max-h-[calc(100vh-10rem)]">
                file={{ data: arrayBuffer }}
                className="flex justify-center"

export default PaperViewer

Here, I am trying to set the total page count in the onDocumentLoadSuccess() method. However, it throws the following error:

TypeError: Cannot perform Construct on a detached ArrayBuffer

I even tried setting the value manually to a number like so:

const onDocumentLoadSuccess = (2) => {

But the error persists. It seems the very act of calling setPageNum is causing the error. What am I doing wrong here?