Package using for creating pdfs: @react-pdf/renderer

I’ve tried setting an invisible layer over the pdf, but it doesn’t work. I’ve also wrapping the PDFViewer component in a div with userSelect: None style, but that wont allow the user to even scroll the pdf.

import { Document, Link, Page, StyleSheet, Text, View } from '@react-pdf/renderer'
/* import other components */

import { registerEnglishFont } from 'components/fonts'
const styles = StyleSheet.create({
  page: {
    fontSize: 10,
    paddingTop: 25,
    paddingHorizontal: 30,
    paddingBottom: 40,
    lineHeight: 1.3,
    flexDirection: 'column',
    zIndex: -1,
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1000,
  },
  overlayText: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
})

export default function CustomerPDF({ data }) {
  registerEnglishFont('English')

  return (
    <Document>
      <Page size="A4" style={styles.page}>
        /* other things */
        <View style={styles.overlay}>
          <Text style={styles.overlayText}>This text is uncopyable</Text>
        </View>
      </Page>
    </Document>
  )
}