React-pdf height, width, border and scroll styling

Question

I'm having problems styling the PDFViewer component correctly.

I'd like it to look like this: react-pdf example (example using react-pdf out of the box from the package documentation)

I'm using react-pdf/renderer

My code looks like this:

<PDFViewer showToolbar={false}
         style={{ overflow: "hidden", height: "100%", width: "100%", border: 0 }}
      >
    <Quixote />
  </PDFViewer>

const Quixote = () => (
  <Document>
    <Page style={styles.body}>
      <Text style={styles.header} fixed>
        ~ Created with react-pdf ~
      </Text>
      <Text style={styles.title}>Don Quijote de la Mancha</Text>
      <Text style={styles.author}>Miguel de Cervantes</Text>
    </Page>
  </Document>
);

The result looks like this:

result of my code using react-pdf/renderer

I've also tried different variations of class styles on the PDF viewer but not no avail. E.G

  <PDFViewer className={"h-[85vh] w-[85vh]"} showToolbar={false}

I'm finding it difficult to:

1. Remove the grey border on the iframe
2. Remove the scroll
3. Set a fixed height and size that's reasonable and is the full size of the pdf with no overflow (like the react-pdf example)

Has anyone had similar problems with react-pdf/renderer and can help please?

I chose react-pdf/renderer because it creates and renders pdf's on the fly. React-pdf however, seems to be nicely styled out of the box so alternatively I could just create pdf's and pass them in to a react-pdf component.