I am rendering pdf pages using react-pdf inside a shadcn-ui ScrollArea. The pages are displayed perfectly and the ScrollArea is scrollable using track pad but the scrollbar can't be clicked/dragged.

Code below

 <div ref={ref} className='flex lg:flex-1/2 justify-center items-center w-full text-center border rounded-md py-4'>
        <ScrollArea className='h-[calc(100vh-7rem)] max-h-calc(100vh-7rem)]'>
          <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess} loading={PdfLoading}>
            { Array.from(Array(numPages).keys()).map((n) => (
              <Page key={n} loading={PageLoading} pageNumber={n+1} width={width ? width * 0.95 : 100} />
              ))
            }
          </Document>
          <ScrollBar orientation='vertical'/>
        </ScrollArea>
    </div>

See vid: