Download more than 1 PDF

I make a query to an api where I bring 1 json. The data from that json I pass to the table in jsx using Hooks.

When I press the button with the exportPDF function it converts the html table to a PDF file.

For now that's fine but it's only 1 record (ID) idMerchant::27675 How do I do if I want to bring 2 or more records, or how do I get 1 pdf of each record to be downloaded?idMerchant$in28::4193 (With this syntax I bring registers 28 and 4193) I can do it like this or in the way that I can solve it.For example: Try to create an array with 2 IDs const arrayIDs = ['::28', '::4193'];And go through them in a forEach and inside the forEach the axios request if I downloaded 2 pdfs but blank or if it was not blank, only pdfs with the last ID.

Delete table because it is too large

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Table, Button } from 'reactstrap';
import { savePDF } from '@progress/kendo-react-pdf';

const styles = {
  title: {
    textAlign: 'center',
    fontSize: '30px',
    fontWeight: 'bold',
  },
  subtitle: {
    textAlign: 'center',
    background: '#67B71F',
    color: 'white',
  },
  td: {
    fontSize: '15px',
  },
  th: {
    fontSize: '15px',
    fontWeight: 'bold',
  },
  button: {
    fontWeight: 'bold',
  },
};
const options = {
  headers: {
    Authorization: process.env.REACT_APP_GETTOKENPDF,
  },
};

const BlankPage = () => {
  const [legalName, setLegalName] = useState('');
  const [merchantName, setMechantName] = useState('');
  const [Id, setId] = useState('');
  const [officerUpdate, setofficerUpdate] = useState('');
  const [activationDate, setActivationDate] = useState('');
  const [merchantType, setMerchantType] = useState('');
  const [email, setEmail] = useState('');
  const [address, setAddress] = useState('');
  const [phone, setPhone] = useState('');
  const [ruc, setRuc] = useState('');
  const [legalRp, setLegalRp] = useState('');
  const [legalTypeId, setLegalTypeId] = useState('');
  const [legalIdNum, setLegalIdNum] = useState('');
  const [legalRepCountry, setLegalRepCountry] = useState('');
  const [NoMCC, setNoMCC] = useState(0);
  const [domain, setDomain] = useState('');
  const [socialRed, setSocialRed] = useState('');
  const [activity, setActivity] = useState('');

  const arrayIDs = ['::28', '::4193'];
  // const cantidad = arrayIDs.length;

  const exportPDF = () => {
    const element = document.getElementById('content');
    savePDF(element, {
      fileName: `Informe de registro-${legalName}.pdf`,
      paperSize: 'A4',
      scale: 0.8,
      keepTogether: '.card',
    });
  };


  useEffect(() => {
    const apiURL = `${process.env.REACT_APP_URL_PDF}?filter=idMerchant::27675`;
// const apiURL = `${process.env.REACT_APP_URL_PDF}?conditional=idMerchant$in28::4193`;

    axios
      .get(`${apiURL}`, options)

      .then(({ data }) => {
        data.data.forEach((response) => {
          setActivity(response.about);
          setLegalName(response.legalName);
          setMechantName(response.merchantName);
          setId(response.idMerchant);
          setofficerUpdate(response.officerUpdate);
          setActivationDate(response.activationDate);
          setMerchantType(response.merchantType);
          setEmail(response.email);
          setAddress(response.address);
          setPhone(response.phone);
          setRuc(response.ruc);
          setLegalRp(response.legalRep);
          setLegalTypeId(response.legalRepIdType);
          setLegalIdNum(response.legalrepIdNum);
          setLegalRepCountry(response.legalRepCountry);
          setNoMCC(response.mcc);
          setDomain(response.additionalAttributes.webPage);
          setSocialRed(response.additionalAttributes.redSocial);
        });
      })
      .catch((error) => {
        // eslint-disable-next-line no-alert
        console.log('Alerta error: ', error.data);
      });
  }, []);


  return (
    <>
      <div id="content" className="card text-left ">
        <caption style={styles.title}>INFORMACION DE REGISTRO</caption>
        <Table className="table table-bordered">
          ...
        </Table>
      </div>
      <br />
      <Button color="info" size="lg" style={styles.button} onClick={exportPDF}>
        Download
      </Button>
      <br />
    </>
  );
};

export default BlankPage;