'React PDF download with react-pdf not sure what I am doing wrong

I am trying to download a page in PDF format using the React-PDF package. For instance I am trying to download the User's Profile Information. I am using <PDFDownloadLink> on the index.js file and at the User's Page Component I am wrapping it with the <Document> component from the react-pdf. However the page suddenly is giving me the error Cannot read properties of undefined (reading 'match')

That's in the the index.js


<PDFDownloadLink
        document={<ParticipantProfile participant={participant} />}
        fileName="somename.pdf"
      >
        {({ loading }) => (loading ? 'Loading document...' : 'Download now!')}
      </PDFDownloadLink>```
    
Here is in the User's page



return (
    <Document>
      <View>
.....
</View>
</Document>

enter image description here



Solution 1:[1]

<PDFViewer style={styles.PDFContainer}>
    <InvoicePage user={user} invoice={viewInvoice} />
</PDFViewer>

const styles = StyleSheet.create({
    PDFContainer: {
        width: "100%",
        height: "50vh", //As per your page layout 
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shah Vipul