I created one table that has some features every single row can generate a pdf and download by using render-pdf npm, I want to show when the user clicks the download button pdf preview on a new page, it working but the issues rendering in the method they pass all data row data as props on page load it affects the page it's time sometimes, and page crashed I tried on single click send particular data in props it not working fine, Please Helps any Idea it very full for me.

Thanks for help

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { Container } from '@material-ui/core';
import { Text, Page, Document, BlobProvider } from '@react-pdf/renderer';

const data = [
  {
    id: 5,
    name: 'test',
    email: 'test@gmail.com'
  }
];

const MyDoc = ({ data }) => (
  <Document>
    <Page>
      <Text>{data.name}</Text>
    </Page>
  </Document>
);

export default function App() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Container>
        <TableContainer component={Paper}>
          <Table className={classes.table} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>ID</TableCell>
                <TableCell> Name</TableCell>
                <TableCell>Email</TableCell>
                <TableCell>Pdf</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {data.map(booking => (
                <TableRow key={booking.id}>
                  <TableCell>{booking.id}</TableCell>
                  <TableCell>{booking.name}</TableCell>
                  <TableCell>{booking.email}</TableCell>
                  <TableCell>
        <BlobProvider document={<MyDoc BookingData={booking} />}>
          {({ url }) => (
            <a href={url} target="_blank">
              Open in new tab
            </a>
          )}
        </BlobProvider>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Container>
    </div>
  );
}