so we have this server component rendering a client component with holes right here.

 <AnimationLayout
                courses={
                    <GenericSwiper title="General">
                        <Suspense fallback="loading...">
                            <GeneralArticles/>
                        </Suspense>
                    </GenericSwiper>
                }
               //more stuff here
            />

We have a client component with holes to provide server components to as described in docs :
https://nextjs.org/docs/getting-started/react-essentials#nesting-server-components-inside-client-components

However when an Async Server component is loaded in here that makes a request we get this error:

Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.

Any clue as to why this is the case? Any different patterns I should be using instead?