How do i divide my mapped data in pages and place footers on all pages in react-to-print

Question

I am using react-to-print to generate an invoice in which the table data is being mapped. As the mapped content increases it pushes down the footer with no proper placement. I want to place the footer on every page and I also want to show the page number there. How can I do this?

I have been stuck and have tried different CSS properties like absolute and fixed placement of the footer but obviously they are not working. Obviously this issue wont be solved by CSS alone.

<div className="invoice__preview bg-white p-5 rounded-2xl border-4 border-blue-200  ">
    <ReactToPrint
        trigger={() => (
            <button className="bg-blue-500 ml-5 text-white font-bold py-2 px-8 rounded hover:bg-blue-600 hover:text-white transition-all duration-150 hover:ring-4 hover:ring-blue-400">
                Print / Download
            </button>
        )}
        content={() => componentRef.current}
    />
    <div ref={componentRef} className="py-5 px-8 flex flex-col min-h-full relative">
        <div>
            <div className=" flex justify-between my-5">
                <article className=" flex items-start justify-start">
                    <ul>
                        <li className="p-1 ">
                            <span className="font-bold">Location:</span> {location}
                        </li>
                        <li className="p-1 ">
                            <span className="font-bold">To:</span> {rowData.firstname + ' ' + rowData.lastname}
                        </li>
                    </ul>
                </article>
                <article className=" flex flex-col gap-2 items-start justify-end rounded-lg border border-black px-3 py-3">
                    <h2 className=" font-bold">Statements of Accounts (Period)</h2>
                    <ul>
                        <li className=" ">
                          <span className="">From Date:</span> {fromDate}
                        </li>
                        <li className=" ">
                          <span className="">To Date:</span> {toDate}
                        </li>

                    </ul>
                </article>
            </div>

            <table width="100%" className="mb-10 ">
                <thead>
                    <tr className="bg-gray-100 p-1 py-2 text-base text-black border-t border-b border-black uppercase w-full font-semibold">
                        <td className="font-bold">DATE</td>
                        <td className="font-bold">DOC NO</td>
                        <td className="font-bold">NARRATION</td>
                        <td className="font-bold">DEBIT</td>
                        <td className="font-bold">credit</td>
                        <td className="font-bold">balance</td>
                    </tr>
                </thead>
                {clientData && clientData.length > 0 ? (
                    <tbody>
                        <tr className=" h-10 font-bold rounded-xl border border-black">
                            <td></td>
                            <td></td>
                            <td>Opening Balance as on  {formatDate(new Date(fromDate))}</td>
                            <td></td>
                            <td></td>
                            <td>{clientData[0].Balance}</td>
                        </tr>
                        {clientData.map(({ date, docid, description, debit, credit, Balance }, index) => {

                        const formattedDate = formatDate(date);

                        return (
                            <tr key={docid} className="h-10">
                            <td>{formattedDate}</td>
                            <td>{docid}</td>
                            <td>{description}</td>
                            <td>{debit}</td>
                            <td>{credit}</td>
                            <td>{Balance}</td>
                            </tr>
                        );
                        })}

                        <tr className="h-10 font-bold rounded-xl border border-black">
                        <td></td>
                        <td></td>
                        <td>Transaction Totals:</td>
                        <td className="underline">{Math.round(clientData.reduce((total, { debit }) => total + parseFloat(debit || 0), 0))}</td>
                        <td className="underline">{Math.round(clientData.reduce((total, { credit }) => total + parseFloat(credit || 0), 0))}</td>
                        <td></td>
                        </tr>
                    </tbody>
                    ) : (
                    <p className="mx-auto">No data available</p>
                    )}
            </table>

        </div>

        <footer className= " mt-auto footer border-t-2 border-gray-300 pb-5">
            <div className=" w-full flex justify-evenly pt-4 pb-14 px-5 border-b border-gray-300 mb-2 text-base">
                <p>Prepared By</p>
                <p>Approved By</p>
                <p>Salesman</p>
                <p className=" ">Reciever's Name & Signature </p>
                <p>Store Keeper</p>

            </div>
            <ul className="flex flex-wrap items-center gap-2 justify-center">
                <li>
                    <span className="font-bold">Email:</span> {"[email protected]"}
                </li>
                <li>
                    <span className="font-bold">Tel:</span> {""}<span className="ml-1 font-bold">-Fax:</span> {""}
                </li>
                <li>
                    <span className="font-bold">P.O Box:</span> {" "}
                </li>
            </ul>
            <p className="text-center px-5 mt-4 text-xs ">
            Thankyou for your purchase!
        </p>
        </footer>
    </div>
</div>