Nextjs NextResponse.next() inside middleware deployed to vercel doesn't behave the same as on local

Question

I am using middleware on Nextjs 12.1.2 to authenticate and authorize user on a specific page

_middleware.ts inside /peneliti folder:

export const middleware = async (req: NextRequest, ev: NextFetchEvent) => {
  const origin = req.nextUrl.origin
  const { role, authorized } = await authenticate({ req, role: "PENELITI" })

  if (role && !authorized )
    // user authenticated but unauthorized, redirecting to current role default dashboard
    return NextResponse.redirect(`/${role.toLowerCase()}/dashboard`.toString())

  if (!role && !authorized ) 
    //user unauthenticated and unauthorized, redirecting to homepage 
    return NextResponse.redirect(origin)

  // user authenticated and authorized
  return NextResponse.next()
}

This middleware doing fine on local development and render the right page (/peneliti):

This is what happens on vercel:

I dont know if this error caused by vercel or the middleware itself because its still on beta. Any suggestions? Thanks in advance!