ReactDOM.hydrate replace container instead of inserting into - reactjs

Question

First of all, there is a similar question to this one. I intentionally chose a similar title but this question is slightly different.
I have some server side rendered React code. It gives me HTML something like this:
<main>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
</main>
I am currently implementing partial hydration, ie. instead of having one big React app on my page that mounts at some root element, I am only hydrating parts of the page with their corresponding components.
That means I have an <Article> component like this
function Article() => (
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
)
That I am mounting at the first article, ie.
const container = document.querySelector('main > article:first-child');
ReactDOM.hydrate(<Article />, container);
I was hoping that would hydrate the first <article> element and leave the rest alone, which works, except of using and hydrating the <article> element ReactDOM actually mounts inside the <Article /> inside the DOM element resulting in this HTML:
<main>
<article>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
</article>
^ -- <article> inside <article>, not cool
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
<article>
<h2>Lorem ipsum</h2>
<p>dolor sit amet</p>
</article>
</main>
Now I am wondering if there is any way I can make ReactDOM use that container instead of inserting into it.