How to force page break using react-to-print library?

Question

I want to print my html page, which is developed in React Js. I want to show each component in newpage. I am trying to force page break by using this code

 <table>
          <tbody>
              {props.scores.map(competencyScores => (
                  <tr style={{breakBefore: 'page', breakInside: 'avoid', breakAfter: 'page', position:'relative'}}>
                  <td style={{breakBefore: 'page', breakInside: 'avoid', breakAfter: 'page',  position:'relative'}}>
            <CompetencyOverview
              competencyWithScore={competencyScores}
              key={competencyScores.id}
              innerRef={el => (competenciesRef.current[competencyScores.id] = el)}
              hideCircle={true}
              projectId={props.projectId}
            />
                    </td>
            </tr>
          ))}
          </tbody>
        </table>

i am using react-to-print library to print html. I am unable to force page break. Can anyone suggest me solution or any new library where i can achieve pagebreak.