Uncaught TypeError: parentInstance.children.push is not a function error in react-pdf/renderer in Next.js

I'm trying to print pdf on screen in the Next.js app. And I'm using the custom document from the Next.js docs, to manipulate the DOM.
Link to the custom document:
https://nextjs.org/docs/advanced-features/custom-document
My document is same as this custom document except that I have included my DOM id like this, it is written next to the `````` line:
```

```
Below is the file where I'm using the createPortal to write my pdf:
```
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";

// Create Document Component
export default function TestDoc({ show, children }) {
const [isBrowser, setIsBrowser] = useState(false);
useEffect(() => setIsBrowser(true), []);
const paperContent = show ?

: null;

if (isBrowser) {
return ReactDOM.createPortal(
paperContent,
document.getElementById("my-pdf")
);
} else {
return null;
}
}
```
And below is the code of the children prop that I want to render:
```
import TestDoc from "@/components/TestDoc";
import {
Document,
Page,
Text,
View,
StyleSheet,
PDFViewer,
} from "@react-pdf/renderer";
export default function Component(){

...code...

return(
{showPaper && (





Section #1


Section #2





)}
);
}
```

But when I run this code, its creating these errors:

1)

Uncaught TypeError: parentInstance.children.push is not a function
at appendChildToContainer...

2)

Uncaught TypeError: _parentInstance$child3.indexOf is not a function
at removeChildFromContainer...

3)

The above error occurred in the