How can I pass two different RenderFragments to a component and render those in different locations

I am creating a simple table component that has two parts header and the body.So from user's(developer) perspective this is what I am trying to do.

Client.razor

<Table><THeader><Th>Col 1</Th><Th>Col 2</Th><Th>Col 3</Th></THeader>    @foreach (var eachData in Data)    {<Tr><td>@eachData.x</td><td>@eachData.y</td><td>@eachData.z</td></Tr>    }</Table>

THeader.razor

<thead><tr>        @ChildContent</tr></thead>@code {    [Parameter]    public RenderFragment ChildContent { get; set; }}

Table.razor

<table>    @ChildContentHeader<tbody>        @ChildContent</tbody></table>@code {    [Parameter]    public RenderFragment ChildContentHeader { get; set; }    [Parameter]     public RenderFragment ChildContent { get; set; }}

My approach is wrong because everything inside the tag <THeader> is rendering under the <tbody> of the Table.razor along with the content of the <Tr> from the Client.razor, because the @ChildContent is placed under <tbody> of the Table.razor. This is not what I want to do.

What I am trying to do here is to render the <THeader> part at the @ChildContentHeader of the Table.razor. How to do that.