Hey everyone, I'm trying to use an async component inside of a MUI Grid in order to make use of next-auth server session information (tried both the old and new MUI Grid version) but it logs the following message (As well as giving me the attached popup):

*"Warning: Failed prop type: Invalid prop children supplied to ForwardRef(Grid), expected a ReactNode." *

If I put the async component in a div instead of the Grid, it works just fine.

Am I doing something wrong or is it simply not possible to put async components in a Grid?

(next-auth doesn't seem to cause it, since I tried it in an empty project as well and it still logs the error message without next-auth installed)

Next.js version: 14.0.1
mui/material version: 5.14.15

To showcase what I mean, here's an example with pseudo components:

SSR Component that contains the Grid:

export default function Component() {
    return(
        <div>
            <Grid container>
                <AsyncComponent />
            </Grid>
        </div>
    )
}

Async component that is used in the Grid:

import { getServerSession } from "next-auth/next"
import { options } from "@/app/api/auth/[...nextauth]/options"

export default async function AsyncComponent() {
    const data = await getServerSession(options);

    return (
        <div>{JSON.stringify(data)}</div>
    )
};