I have a client side component that I can see is working as expected, for visibility my component has these parts that are important to this issue:

 
export const setActionParams = (sessionType: ActionParams, router) => {
  if (sessionType.paid) {
    const sessionUrl = `/session/${sessionType.vidId}`
    console.log('I can view my session url here in paid', sessionUrl)
    return {
      variant: 'secondary',
      onClick: () => router.push(sessionUrl),
      text: 'Join session',
    }
  }
  return {
    variant: 'primary',
    onClick: () => router.push(sessionType.stripeUrl),
    text: 'Pay now',
  }
}

return (
    <Card>
          {sessions.map(session => {
            const actionParams = setActionParams(session, router)
            return (
              <SessionListItem
                key={session.id}
                Action={
                  <Button variant={actionParams.variant} onClick={actionParams.onClick}>
                    {actionParams.text}
                  </Button>
                }
                actionStates={['imminent', 'present', 'attention']}
                showProvider
                client={session.fullName}
                provider={session.fullName}
                providerId={session.providerId}
                datetime={session.date}
                paid={session.paid}
              />
            )
          })}
    </Card>
  )

At this point I can see my sessionUrl is correct.

On click I get redirected to my sessionUrl as expected. On the page.tsx file I am doing this:

'use server'

import VideoContainer from './VideoContainer'

export default async function SessionPage({ params }: { params: { slug: string } }) {
  const { slug } = params
  console.log('what is my slug', slug)
  return <VideoContainer sessionId={slug} />
}

And locally this works perfectly. But on vercel I see the following response from my console logs:
what is my slug fs3f-23
what is my slug undefinedfs3f-23

I have no idea why.