Why does using a React component for React-PDF just use the literal name instead of the real code?

Question

I imported the react-pdf npm library

import { Page, Document } from '@react-pdf/renderer';

And then tried to use it like

<div>
     <Document file="https://bitcoin.org/bitcoin.pdf" onLoadSuccess={ this.onDocumentLoadSuccess.bind(this) }>
           <Page pageNumber={pageNumber} />
     </Document>
      <p>
            Page {pageNumber} of {numPages}
      </p>
</div>

But instead I got this output:

<document file="https://bitcoin.org/bitcoin.pdf"><page pagenumber="1"></page></document>

When I put a debugger in, it is literally converting Page to "PAGE" and Document to "DOCUMENT" strings instead of components.

I've used other React components installed via npm without any problem so I am wondering what could possibly be going wrong here?