NextAuth credentials how to handle unauthorized user?

import { useSession } from 'next-auth/react'
import { AppType } from 'next/dist/shared/lib/utils'
import { MainLayout } from './main-layouts'

enum AuthStates {
  AUTHENTICATED = 'authenticated',
  UNAUTHENTICATED = 'unauthenticated',
}

const ChooseLayout: AppType = ({
  Component,
  pageProps: { ...pageProps },
  ...rest
}) => {
  const { status, data } = useSession({
    required: true,
    onUnauthenticated() {
      router.push('/sign-in')
    },
  })
  const { router } = rest

  console.log('status', status)

  if (status === AuthStates.UNAUTHENTICATED) {
    return <Component {...pageProps} {...rest} key={router.asPath} />
  }

  // Authenticated
  return (
    <MainLayout>
      <Component {...pageProps} {...rest} key={router.asPath} />
    </MainLayout>
  )
}

export default ChooseLayout