Issue where only the first url search param is defined but the others are null. It is always the first one that is defined, regardless of which one I put there. The API route gives back a url that first redirects to an app, then when an action happens in that app I am redirected back to the callbackUrl:

export async function POST(req) {
    const body = await req.json()
    const paymentRequest = await createPaymentRequest()
    if (body.mobileUser) {
        const callbackUrl = `https://mydomain.com/receipt?id=${encodeURIComponent(paymentRequest.id)}&forening=${encodeURIComponent(body.foreningName)}&alias=${encodeURIComponent(body.alias)}&ticket=${encodeURIComponent(body.ticketValue)}`
        console.log(callbackUrl)
        const appUrl = `app://paymentrequest?token=${paymentRequest.token}&callbackurl=${callbackUrl}`;
        return NextResponse.json({ url: appUrl, statusUrl: paymentRequest.location })
    } else {
        const data = await getQrCodeFromToken(paymentRequest.token)
        return NextResponse.json({data: data, statusUrl: paymentRequest.location})
    }

I have verified that the response from this API has the correct value for "callbackUrl".
The page that I am routing to looks like this:

"use client"

function Receipt() {

  const searchParams = useSearchParams();
  const id = searchParams.get("id");
  const forening = searchParams.get("forening");
  const ticket = searchParams.get("ticket");
  const alias = searchParams.get("alias");
  
  // Only param "id" is defined here as it is specified as the first param, others are null
  ...

  return ...
}

Any ideas on what I might be doing wrong? I have tried not using encodeURIComponent without any success.