Here is my code, it's can be accessed by '/callbacks/shopee'

"use client";

import { AppRoute } from "@/constants/AppRoute";
import shopeeService from "@/services/shopee.service";
import { Flex, Spinner } from "@chakra-ui/react";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default async function ShopeeCallback({
  searchParams
}: {
  searchParams: {
    user_id?: string;
    code?: string;
    shop_id?: string;
    error?: string;
  };
}) {
  const router = useRouter();

  useEffect(() => {
    const user_id = searchParams["user_id"];
    const code = searchParams["code"];
    const shop_id = searchParams["shop_id"];
    const error = searchParams["error"];
    if (!user_id || !code || !shop_id) {
      router.replace(AppRoute.CONNECT_SHOP);
      return;
    }
    shopeeService
      .addShopee(user_id as string, code as string, shop_id as string, error ?? "")
      .then(() => {
        router.replace(AppRoute.CONNECT_SHOP);
      })
      .catch((e) => {
        router.replace(AppRoute.CONNECT_SHOP);
      });
  }, [router, searchParams]);

  return (
    <Flex p={0} m={0} w="100vw" h="100vh" alignItems="center" justifyContent="center">
      <Spinner size="xl" color="primary.500" />
    </Flex>
  );
}

What I want is when user got redirect to this page with specific query params, I make a request to create user item in database then redirect them to other page. Can you told me how to fix this or what is the best practice to do something like this.

I use App directory and Next13