React to print fixed footer overlapping contents

Question

I am using a react-to-print library to print some reports that are dynamic. The problem is I need a fixed footer on every page while printing and I have a fixed footer which overlaps the content before going to new page . I know how position:fixed works and would have solved if reports weren't dynamic. What can be the possible fix here? My PrintingComponenet is

<div className="page-footer">
        <hr />
        <p className="pt-1">For screening purposes only. Not for use in diagnostic procedures</p>
        <div className="flex w-full items-center  justify-between">
          <div>
            Printed By ( <span className="text-primary-700">{!isServer && window.location.hostname}</span>{" "}
            ) on {moment(new Date()).format("MMM Do YYYY, h:mm:ss A")}
          </div>

          <span>{member.member_code}</span>
        </div>
      </div>
      <div className="w-full">
        {Object.keys(test).map((el, index) => (
          <div key={el}>
            <div style={{ height: "100px" }} />
            <div className=" bg-gray-700 mt-4 px-3  capitalize py-4 text-xl text-white font-medium space-y-2 whitespace-nowrap">
              {el} Test Report
            </div>

            {el === "Body Mass Index" ? (
              <>
                <div className="flex mt-3 border-b pb-3">
                  <div className="text-gray-600 flex-1 text-2xl">Test Date</div>
                  <div className="text-gray-600 flex-1 text-2xl">Temperature</div>
                  <div className="text-gray-600 flex-1 text-2xl">Test Result</div>
                </div>
                {test[el].map((el: any, index: number) => (
                  <div key={el.test_date} className="flex mt-4   border-b pb-2 last:border-0 ">
                    <div className=" flex-1 text-xl">
                      <span className="block">{moment(utcDateToLocal(el.test_date)).format("MM/DD/YYYY")}</span>
                      <span className="block">{moment(utcDateToLocal(el.test_date)).format("h:mm A")}</span>
                    </div>
                    <div className=" flex-1 text-xl">
                      {el.temperature} {el.temperature && <>&deg; F</>}{" "}
                    </div>
                    <div className=" flex-1 text-xl ">Test</div>
                  </div>
                ))}
              </>
            ) : (
              <>
                <div className="flex mt-3 border-b pb-3">
                  <div className="text-gray-600 flex-1 text-2xl">Test Date</div>
                  <div className="text-gray-600 flex-1 text-2xl ">Test Result</div>
                </div>
                {test[el].map((el: any, index: number) => (
                  <div key={el.test_date} className="flex mt-4   border-b pb-2 last:border-0 ">
                    <div className=" flex-1 text-xl">
                      <span className="block">{moment(utcDateToLocal(el.test_date)).format("MM/DD/YYYY")}</span>
                      <span className="block">{moment(utcDateToLocal(el.test_date)).format("h:mm A")}</span>
                    </div>

                    <div className=" flex-1 text-xl ">
                      <div>Test Result</div>
                      <div>Test Result</div>
                      <div>Test Result</div>
                      <div>Test Result</div>
                      <div>Test Result</div>
                    </div>
                  </div>
                ))}
              </>
            )}
          </div>

CSS for footer is

.page-footer {
  height: 30px;

  position: fixed;
  bottom: 0;
  width: 100%;
}

@media print {
  .page-footer {
    page-break-after: always;
  }
}