NextJS Client component not receiving props until rendering props.children?

Super strange one that I can’t quite figure out…

I have a server side component, which gets data and then passes it down to the client component – pretty standard.

Heres the strange thing… if I log the data on the server side it’s all fine as expected. I then pass it down to the client, which weirdly receives only “children” props (which aren’t passed anyway..). If I render the children, then I actually get passed the props which I passed down, and children are no longer passed? It’s obviously not intentional, and I end up with my component being rendered twice as I assume one time its being fed to itself? Super strange

Here’s my code

Server side component:

// SERVER SIDE COMPONENT

'user server';

const Page = async () => {
    const news = await getAllNews();
    console.log(news)
    //correctly logs news in the server console
    return <Template news={news}/>
}

export default Page;


//CLIENT SIDE COMPONENT WHERE NEWS IS NOT PASSED

'use client';

const PageTemplate = (props: any) => {
    console.log(props);
    // console logs children, which is a React component
    return (
        <S.PageTemplateWrapper>
            Template
        </S.PageTemplateWrapper>
    )
}

export default PageTemplate;


//CLIENT SIDE COMPONENT WHERE NEWS IS  PASSED

'use client';

const PageTemplate = (props: any) => {
    console.log(props);
    // console logs children, then news (separately). Renders two instances of "Template"
    return (
        <S.PageTemplateWrapper>
            Template
            {props.children}
        </S.PageTemplateWrapper>
    )
}

export default PageTemplate;

So where is props.children coming from?
Why is my data only passed when I render props.children?