I'm trying to get a pretty simple server component working in a <Suspense>. It shows in a modal, like this:

"use client"

function SessionModal({session}: SessionModalProps) {
    return <Suspense fallback={<LoadingPage />}>
        <SessionPage sessionId={session.sessionId} />
    </Suspense>
}

"use server"

export interface SessionPageProps {
    sessionId: string
}

export async function SessionPage({sessionId}: SessionPageProps) {
    console.log("rendered!")
    const sessionStuff = await someFetch(sessionId)
    return <div>some content based on the session data</div>
}

In my testing, it pretty much works exactly as I would expect. There is no visible bug. However, I'm getting errors in both the server and client, and for some reason my server component is rendered 5 times.

On server (this one only happens the first time the server component is mounted during a browser session):

⨯ TypeError: Cannot destructure property 'sessionId' of 'props' as it is undefined.
...
rendered!
rendered!
rendered!
rendered!
rendered!

Note: The client renders twice, because the modal is attached inside useEffect and strict mode causes it to mount/unmount/remount.

On client:

app-index.js:34 Warning: Cannot update a component (`Router`) while rendering a different component (`proxy`). To locate the bad setState() call inside `proxy`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at proxy
    at Suspense
    at div
    at SessionModal (webpack-internal:///(app-pages-browser)/./src/components/admin/admin.page.tsx:145:11)
    at div
    ...

Am I doing something totally wrong?