How can you render pages in separate React components and have a PDFFindController at the same time?

[muyJason]

How can I load and render all pages of a PDF file in individual React components and still maintain a search function across all pages?

Hi, I am trying to create my own pdf-viewer with pdf.js as core library and Vite, ReactJS as framework.

This viewer is meant to render PDFs with 1000+ pages efficiently, which works well through the react-window library.
This works according to the following scheme:

<List
        className="List"
        itemCount={numPages}
        itemSize={pageHeight}
        height={windowSize.height}
>
       {({index}) => (
              <PageViewerComponent page={index}>
       )}
</List>

I manage to implement a search function when I render all pages in one component
For this I followed the "simpleviewer" example.

I also managed to load the pages in individual components by fetching and rendering the pages individually with pdf.getPage(n) as shown here.

I also want to mention, that I have read many issue reports about the SinglePageViewer, RenderingQueues and PageViewer, which did not help me with my problem.

TLDR:
How can I retrieve individual pages from the PDFViewer and render them in separate components and still have a search function?

• Rendering pages individually in a separate viewer is not a problem
• Implementing a search function is not a problem
• The problem is the combination

SinglePageViewer, PageViewer or RenderingQueues do not seem to have helped

Attachments and Configurations

Attach (recommended) or Link to PDF file here:
https://api.printnode.com/static/test/pdf/multipage.pdf (dummy pdf)

Configuration:

• Web browser and its version: Google Chrome 124.0.6367.61
• Operating system and its version: Windows 11 (23h2)
• PDF.js version: 3.11.174
• Is a browser extension: No