react-to-print prints different layout

Question

I want to print in reactjs a Know Your Customer Form on button press after filling customer details. So to do this I made two Forms; First one is the normal one filled through the client to fill customer data and the second form takes the data and inputs in a read only form. The problem is when I use use react-to-print the rendered layout is different from window.print and I don't know why! This is my function

  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.current,
  });

And this is the button

            <button
              className="btn btn-light"
              variant="secondary"
              style={{ width: "10%" }}
              type="button"
              onClick={() => {
                handlePrint();
              }}
              disabled={props.loading}
            >
              print
            </button>

and this is the printable form

        <NonShowDiv>
        <PrintableKYCForm ref={componentRef} onClick={handlePrint} makeToast={props.makeToast} />
        </NonShowDiv>

and this is the css for NonShowDiv

export const NonShowDiv = styled.div`
  display: none;
  @media print {
    display: block;
  }
`;

This css is used to only show the form for printing.

This is the wrong output using react-to-print)1

This is how it should look like!(using window.print())2