I am getting 'Page Unresponsive', when I am trying to render my pdf using react-pdf/renderer

Question

here are my library versions:

"@react-pdf/renderer": "^3.1.12",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"

I am sure enough that all the props passed in the below mentioned file are 100% correct in every manner. Issue is that that it loads some time and freezes sometimes.

As a debug you can also paste my code to official playground, You can observe that what I am going through.

Also I have wrapped the downLoad File in

<PDFViewer>
   <DownloadFile
      profileImg={profileImg}
   />
</PDFViewer>

below Is the code of my "DownloadFile.js", Thanks in advance for you help! and if anyone can suggest some alternative library than that's also good for me at this point of time

import React from 'react';
import { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer';

const styles = StyleSheet.create({

    coverPage: {
        backgroundColor: "#AFEBEB",
    },
    coverPageInner: {
        margin: '50px 48px 50px 0',
        backgroundColor: "#FFFFFF",
    },
    coverPageHeader: {
        margin: '72px 63px 0 0',
        height: '64px',
        backgroundColor: '#4BA5A1',
        padding: '10px 43px 10px 139px',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    coverPageHeaderLogo: {
        backgroundColor: "#FFFFFF",
        padding: '5px 9px',
        borderRadius: '50%',
        height: '44px',
        width: '44px',
        objectFit: 'contain'
    },
    coverPageHeaderText: {
        color: "#ffffff",
        fontSize: '24px',
        lineHeight: '40px',
        fontWeight: '800',
        margin: '0 0 0 10px'
    },
    coverPageMiddle: {
        margin: '75px -22px 75px 116px',
        backgroundColor: '#4BA5A1'
    },
    coverPageMiddleText: {
        fontSize: '48px',
        fontWeight: 'extrabold',
        lineHeight: '50px',
        color: '#FFFFFF'
    },
});

// Create Document Component
function DownloadFile({ profileImg }) {

    return (
        <Document>
            <Page size={"A4"} style={styles.cover__page}>
                <View style={styles.cover__page__inner}>
                    <View style={styles.cover__page__header}>
                        <Image style={styles.cover__page__header__logo} src={profileImg} alt='' />
                        <Text style={styles.cover__page__header__text}>Vardhaman Textiles</Text>
                    </View>
                    <View style={styles.cover__page__middle}>
                        <Text style={styles.cover__page__middle__text}>GHG Emission Report</Text>
                    </View>
                    <View style={styles.cover__page__lower}>
                        <Text>Powered by</Text>
                        <Image src="/assets/images/sideBarLogo.svg" alt="GreenStitch" />
                    </View>
                </View>
            </Page>
        </Document>
    )
};

export default DownloadFile