How to print specific content on each page in react js?

Question

I am unable to print specific content on each page of the printed document in react js. My table is printed on 2 pages and the other details are not printed along with the table.

import React, { forwardRef } from "react";
import { useSelector } from "react-redux";
import ContentWrapper from "../../../../components/ContentWrapper/ContentWrapper";
import moment from "moment";
const CustomerPrint = forwardRef(({ response }, ref) => {
  const { totalCODAmount, date } = useSelector(
    (state) => state.customerPrintDetail
  );

  const printDetailsOfBooking = [
    { header: "CN NUMBER", accessorKey: "consigneeNo" },
    // { header: "Address", accessorKey: "consigneeAddress" },
    { header: "Amount", accessorKey: "amount" },
    { header: "Status", accessorKey: "status" },
  ];

  return (
    <div ref={ref}>
      <ContentWrapper>
        <div className="my-2 w-full">
          <div className="mb-1 flex justify-between">
            <div>
              <p>Booking Details for {moment(date).format("MMMM DD, YYYY")}</p>
            </div>
            <div>
              <p>
                Printing Time: {moment().format("MMMM DD, YYYY hh:mm:ss A")}
              </p>
            </div>
            <div className="text-base">
              <p>
                Total Amount{" "}
                <span className="font-bold">Rs {totalCODAmount}/-</span>
              </p>
            </div>
          </div>
        </div>
        {response && response.length > 0 && (
          <table className="text-sm w-full text-center">
            <thead className="bg-clrSecondary-1 text-white">
              <tr>
                <th className="py-2 px-3">Sr#</th>
                {printDetailsOfBooking.map((item, index) => (
                  <th key={index} className="py-2 px-3">
                    {item.header}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody className="text-base">
              {response.map((rowData, rowIndex) => (
                <tr key={rowIndex}>
                  <td className="py-2 px-3 border border-slate-300">
                    {rowIndex + 1}
                  </td>
                  {printDetailsOfBooking.map((item, colIndex) => (
                    <td
                      key={colIndex}
                      className="py-2 px-3 border border-slate-300"
                    >
                      {rowData[item.accessorKey]}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </ContentWrapper>
    </div>
  );
});

export default CustomerPrint;

It resulted to print table only on second page of the printed document. I want booking details, printing time and totalCODAmount also print on second page.