Trying to print multiple components on separate pages using react-to-print

Question

I'm using react-to-print and I have a list of components I want printed each on its separate page. When pressing on the button I get the error Argument appears to not be a ReactComponent. Keys: 0,1

I have a ref array:

const qrRefs = useRef([]);

This is the component list:

{rowSelection.map((el, i) => (
     <p key={i} ref={(el) => (qrRefs.current[i] = el)}>
         {el.id}
     </p>
))}

This is the print function

const handlePrintQR = useReactToPrint({
    content: () => qrRefs.current,
    copyStyles: true,
});

Answer 1

I made it using CSS! I created a containing div for the array and gave it a ref

<div ref={qrRef}>
  {rowSelection.map((el, i) => (
    <p
      key={i}
      style={{ breakAfter: "page" }}
    >
      {el.id}
    </p>
  ))}
</div>

The breakAfter: "page" property in the style of the <p> tag breaks the printing page after each component so I get each component in separate page!