Disabling annotationLayer div in react-pdf

Question

I can't seem to find any resource on disabling annotations. The PDF preview has an extra blank page and after inspecting there's a class for annotations but I would like to have this disabled. Here's what my code looks like

function PDFPreview({ url }) {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

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

  const fileUrl = url;

  return (
    <Stack>
      <Document
        file={fileUrl}
        onLoadSuccess={onDocumentLoadSuccess}
        renderAnnotationLayer={false}
        options={{ disableAnnotationRendering: true }}
      >
        {Array.from(new Array(numPages), (el, index) => (
          <Page key={`page_${index + 1}`} pageNumber={index + 1} />
        ))}
      </Document>
      <p>
        Page {pageNumber} of {numPages}
      </p>
    </Stack>
  );
}

I have tried using the options property as well as passing the property to the Document component but I'm having no luck.

Answer 1

Apparently spending time on the docs made me realize the <Page> had a boolean property (renderAnnotationLayer) to disable the annotation layer. Hope this would help anyone who needs it.