How to converting a textarea paragraph into pdf format in react.js.?

import React from 'react';
import { Page, usePDF, Text, Document, StyleSheet, PDFDownloadLink } from '@react-pdf/renderer';
import { Button, Input } from 'reactstrap';
import "./index.css"

const styles = StyleSheet.create({
    body: {
        paddingTop: 35,
        paddingBottom: 65,
        paddingHorizontal: 35,

    },
    title: {
        fontSize: 24,
        textAlign: 'center',
    },
    author: {
        fontSize: 12,
        textAlign: 'center',
        marginBottom: 40,
    },
    subtitle: {
        fontSize: 18,
        margin: 12,
    },
    text: {
        margin: 12,
        fontSize: 14,
        textAlign: 'justify',
    },
    image: {
        marginVertical: 15,
        marginHorizontal: 100,
    },
    header: {
        fontSize: 12,
        marginBottom: 20,
        textAlign: 'center',
        color: 'grey',
    },
    pageNumber: {
        position: 'absolute',
        fontSize: 12,
        bottom: 30,
        left: 0,
        right: 0,
        textAlign: 'center',
        color: 'grey',
    },
});
const PdfFile = ({ text }) => (
    <Document>
        <Page style={styles.body}>
            <Text style={styles.header} fixed>
                ~ Created by Murali ~
            </Text>
            <Text style={styles.title}>Pdf converter</Text>
            <Text style={styles.author}>Murali chowhan</Text>

            <Text style={styles.text}>
                {/* <pre> */}
                {text}
                {/* </pre> */}
            </Text>

            <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
                `${pageNumber} / ${totalPages}`
            )} fixed />


        </Page>
    </Document>
);



export default function PdfConvert() {
    const [text, setText] = React.useState("");

    function handleChange(e) {
        if (e.key === "Enter") {
            setText(`${e.target.value}\n`);
        }
        setText(e.target.value);
    }

    return (
        <>
            <div className='text-area-main-cont'>
                <Input
                    type='textarea'
                    rows={4}
                    style={{ width: "60vw", minHeight: "50vh" }}
                    value={text}
                    onChange={handleChange}
                    onPressEnter={handleChange}
                />
            </div>
            <div className='pdf-download-btn-cont'>
                <PDFDownloadLink document={<PdfFile text={text} />} fileName="test.pdf">
                    {({ blob, url, error }) =>
                        <Button color='success' outline>
                            <a href={url} target="_blank"
                                download="test.pdf" style={{ color: "black", textDecoration: "none" }}>
                                Download
                            </a>
                        </Button>

                    }
                </PDFDownloadLink>
            </div>

        </>
    )
}

/* .text-area-main-cont {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pdf-main-cont {
    width: 70%;
    margin: auto;

}

.pdf-download-btn-cont {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 70%;
    margin: auto;
    padding: 20px;
} */