React to print fixed footer overlapping contents - css

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 && <>° 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;
}
}