I'm using nextjs v14, I have a delete function in the actions.ts that is "use server" , it handles the endpoints requests and responses.

Normally I use try{}catch{} blocks to handle the responses and the errors in the actions.ts, for example:
It works normally without any mis functionality.
if there is success the try{} error the catch{}block response.

export async function deleteUser(id: number) {
  const token = cookies().get("token")?.value;
  apiClient.defaults.headers.common["Authorization"] = `Bearer ${token}`;
  try {
    const res = await apiClient.delete(endpoints.users.delete + "?id=" + id);
    revalidatePath("users");
    const { statusCode } = res.data;
    return responseMessage(statusCode, "user deleted successfully");
  } catch (error) {
    if (axios.isAxiosError(error)) {
      const {
        status,
        statusText,
        data: { errors: id },
      } = error?.response || {};
      return responseMessage(status as number, id?.id[0] || statusText);
    } else {
      return responseMessage(400 as number, "hi error");
    }
  }
}

The problem comes from the client component table-layer.tsx. I have a function named deleteDataFunction(id: number), it gets the deleteUser(id:number) server action from actions.ts file and do its functionality. But there is an issue if the deleteUser(id: number) returns success try{} or error catch{} response in the actions.tx, it returns the response on the try{} block of the deleteDataFunction(id:number) and the catch{} block works for the client component errors only.

  async function deleteDataFunction(id: number) {
    setIsDeleting(true);
    try {
      const res = await props.deleteFunction(Number(id));
      const toastType = res.success ? "success" : "error";
      toast?.[toastType](res.message);
      closeDeletePopover();
    } catch (error) {
      toast.error("the data can not be deleted");
    } finally {
      setIsDeleting(false);
    }
  }