How to do Google docs like pagination using React

In Google docs, If you create a document. You will start writing in Page 1. If the page is filled with content, then automatically Page 2 is created and the rest of the contents goes to page 2 and so on. If you remove some lines from Page 1, then the contents from Page 2 (If there are any) will be moved to the bottom of the page 1.

So in my scenario, I have some presentational components (Around 10) which gets filled by a form. Consider Left Pane has a form and updating them shows live preview of Docs like UI on the right pane.

I tried by directly manipulating DOM using some methods like insertBefore in a react app. I read that doing DOM manipulation directly on a React App is error prone and it is not recommended. Is there any other pattern or method to achieve this use case?

from How to do Google docs like pagination using React