Why I can't remove white line from bottom of print page

Question

Can someone tell me how can I remove the white line from print page?

print page size is 80x50mm and content size is too

and there is no padding property in the page.

but the page has a white line...

image

css

.App {
  font-family: sans-serif;
  text-align: center;
}

@media all {
  .pagebreak {
    display: none;
  }
}

@media print {
  html,
  body {
    /* height: initial !important; */
    /* overflow: initial !important; */
    /* -webkit-print-color-adjust: exact; */
    background-color: #eee;
    margin: 0;
  }
}

@media print {
  .pagebreak {
    /* margin-top: 1rem; */
    /* display: block; */
    page-break-before: always;
  }

  .test > div:not(.pagebreak) {
    width: 100%;
    height: 50mm;
    /* overflow: hidden; */
    background-color: #000;
    color: #fff;
    padding-left: 1mm;
    margin: 0;
  }
}

@page {
  size: 80mm 50mm;
  /* width: 80mm; */
  /* height: 100%; */
  /* margin: 0; */
  /* padding: 0; */
}

component html

      <div className="test">
        <div>
          <h1>Page 1</h1>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores
            facere accusamus earum m
          </p>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores
            facere
          </p>
        </div>
        <div class="pagebreak"></div>
        <div>
          <h1>Page 2</h1>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores
            facere accusamus earum maiores adipisci nostrum minima, sed
            reiciendis numqu
          </p>
        </div>
      </div>

https://codesandbox.io/s/print-break-page-reactclicktoprint-forked-ivies?file=/src/styles.css