Dynamically control page breaks with headers and footers in React when some components overflow

I am working on a report automation tool that will print out a monthly report with charts and graphs. The problem I'm having is with one component that may take more than 1 page to print. When I make the headers and footers appear on every page they cover part of the graphs instead of forcing the graph down below the header/above the footer.

So far I have tried several @media print options in CSS like the below code. Is there a better way to do this? Perhaps programmatically in Javascript? I would also like to keep a page count in the footers dynamically without relying on the default print option footers from the browser if anyone has some advice on that as well.

.kpi_wrapper {
    break-inside: avoid;
    margin: 10px 10px 10px 10px;
    
  }

@media print {
  @page {
    margin: 0px;
    margin-top: 5px;
  }
  html {
    margin-top: 50px;
  }
  .menu {
    display: none;
  }

  .upload {
    display: none;
  }
}