"use client";

-- Some imports and interfaces

const SubscriptionDataFetcher: React.FC<SubscriptionDataFetcherProps> = ({ children }) => {
    const [data, setData] = useState<SubscriptionData>({});

    -- Some functions
    return <>{children(data)}</>;
};

export default SubscriptionDataFetcher;

i have this app that needs to call a trpc route, and i have decided to call it like that and return the children to a server component:

export const dynamic = 'force-dynamic';

--some interfaces

const Packages: React.FC = () => {
    <SubscriptionDataFetcher>
        {({ x, y }) => (
            
    </SubscriptionDataFetcher>
export default Packages;

I always get this error and have no idea what it means or how to handle correctly the children return:

Error: Functions are not valid as a child of Client Components. This may happen if you return children instead of <children /> from render. Or maybe you meant to call this function rather than return it.
  <... children={function children}>