How to wrap JSX elements in a React.ReactNode variable

I have a React.ReactNode variable (which can be passed as props)

export default function App() {
  const MyButton = <Button size='large'/>
  return (
    <div>
      <MyButton>Click here</MyButton>
    </div>
  );
}

But this code doesn't work - I'm getting the error: JSX element does not have any construct or call signatures

What I'm trying to do, in other words, I would like to take the MyButton variable, and inject children into it. How can I do that?

I tried with React.createElement:

{React.createElement(
  MyButton,
  {},
  <div>
    <p>Child element 1</p>
    <p>Child element 2</p>
  </div>
)}

But it doesn't expect a React.ReactNode as type.

The real use case I'm trying to implement:
I'm using the package @react-pdf/renderer, which has a component with which you can wrap a button for example, and then clicking on that button will generate PDF.

In my composition I'm trying to implement it by using two separate components, one that passes the PDF generator component of a PDF library (in this example, react-pdf renderer), and another component, that doesn't know about which library is being used. The second component will use get the PDF generator component and just wrap it around a button.

First component:

import { PDFDownloadLink } from '@react-pdf/renderer';

export default function FirstComponent() {
  return (
    <SecondComponent
      {...props}
      downloadPdfElement={
        <PDFDownloadLink
          document={<MyPdfDoc pdfTimelineRows={pdfTimelineRows} />}
          fileName="pdf"
        />
      }
    />
  );
}

The second component should just uses the prop downloadPdfElement and wrap it around some button.

Again, this can all easily be done in one component, just wrap the PDFDownloadLink around a button and that's it, but I'd like to make it into two separate components. If it's too complex to achieve then it's also an answer

After your edit, I'd suggest defining a new component, that will wrap props.children in a PDFDownloadLink, that way you can call that wrapper component anytime, and render a PDFDownloadLink with some custom props.

The DownloadWrapper can be extended to add more props to fit your needs.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

// Demo, imported from Lib
const PDFDownloadLink = (props) => {
    return <button>{props.children}</button>;
}

// Wrapper download button
const DownloadWrapper = (props) => {
    return <PDFDownloadLink>{props.children}</PDFDownloadLink>;
}

const Example = () => {
    return (
        <div>
            <h1>{'Example'}</h1>
            <DownloadWrapper>
                <div>
                    <p>Child element 1</p>
                    <p>Child element 2</p>
                </div>
             </DownloadWrapper>
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

<!-- end snippet -->