'react-pdf' adds html at after each page instead of just rendering the pages of the pdf file

Question

I created next component:

import React from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

interface PdfViewerProps {
  url: string;
}

const PdfViewer: React.FC<PdfViewerProps> = ({ url }) => {
  const [numPages, setNumPages] = React.useState<number | null>(null);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file={url}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        {Array.from(new Array(numPages), (el, index) => (
          <Page key={`page_${index + 1}`} pageNumber={index + 1} />
        ))}
      </Document>
    </div>
  );
};

export default PdfViewer;

And used it in App.tsx

import './App.css';
import PdfViewer from './PdfViewer';

function App() {
  return (
    <div className="App">
      <h1>Перегляд PDF</h1>
      <PdfViewer url="https://localhost:7008/local/stream" />
    </div>
  );
}

export default App;

On the application page, I got the following result:

It is unexpected, because as you can see on next photo, pdf file itself does not contain the page I circled in blue. It contains only the pages like I circled in red.

And as you can see from next photo, this is repeated for each page:

The most interesting thing is that this page consists of html tags

I have no idea what could be the reason for this

Answer 1

In order to disable the addition of text after each page, you need to set the 'renderTextLayer' value to 'false' in the 'Page' component. Like this:

<Page key={`page_${index + 1}`} pageNumber={index + 1} renderTextLayer={false}/>