I’m using mui data grid in a next.js app I’m building. The problem is when I try to do a more complex column definition I run into an error:

{
    field: 'home_address',
    valueGetter: (value, row) => {
        return (row.user.home_address);
    },
    headerName: 'Address' 
},

The error reads: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". {field: ..., valueGetter: function, headerName: ...}

I can hide this error by passing in use server to the closure like this:

{
    field: 'home_address',
    valueGetter: async (value, row) => {
        'use server'
        return (row.user.home_address);
    },
    headerName: 'Address' 
},

but then my address column renders:

[object Promise]

Is there a workaround for this, or a way to force the async closure to resolve before returning?