I am working on a nextjs project (nextjs version 14.2.3)

The problem I am facing is with this code

const SubAccountDetails = ({ details, agencyDetails, userId, userName }) => {
  const { toast } = useToast();
  const { setClose } = useModal();
  const router = useRouter();
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      name: details?.name,
      companyEmail: details?.companyEmail,
      companyPhone: details?.companyPhone,
      address: details?.address,
      city: details?.city,
      zipCode: details?.zipCode,
      state: details?.state,
      country: details?.country,
      subAccountLogo: details?.subAccountLogo,
    },
  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
 
    try {
      console.log("submitted ");
      const response = await upsertSubAccount({
        id: details?.id ? details.id : v4(),
        address: values.address,
        city: values.city,
        companyPhone: values.companyPhone,
        country: values.country,
        name: values.name,
        state: values.state,
      });
      console.log(`upsertSubAccount resp: ${response}`);   // response is undefined here.Why?
      if (!response) throw new Error("No response from server");
      

      toast({
        title: "Subaccount details saved",
        description: "Successfully saved your subaccount details.",
      });

      setClose();
      router.refresh();
    } catch (error) {
      toast({
        variant: "destructive",
        title: "Oppse!",
        description: "Could not save sub account details.",
      });
    }
  }

  useEffect(() => {
    if (details) {
      form.reset(details);
    }
  }, [details]);

  const isLoading = form.formState.isSubmitting;
  //CHALLENGE Create this form.
  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Sub Account Information</CardTitle>
        <CardDescription>Please enter business details</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
            <div className="flex md:flex-row gap-4">
              <FormField
                disabled={isLoading}
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem className="flex-1">
                    <FormLabel>Account Name</FormLabel>
                    <FormControl>
                      <Input
                        required
                        placeholder="Your agency name"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              {/* continuation code */}
            </div>
            <div className="flex md:flex-row gap-4">
              <FormField
                disabled={isLoading}
                control={form.control}
                name="companyPhone"
                render={({ field }) => (
                  <FormItem className="flex-1">
                    <FormLabel>Acount Phone Number</FormLabel>
                    <FormControl>
                      <Input placeholder="Phone" required {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

            
            
            

            <Button type="submit" disabled={isLoading}>
              {isLoading ? <Loading /> : "Save Account Information"}
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  );
};

in file: srclibqueries.ts

// using prisma for db connection
export const upsertSubAccount = async (subAccount: SubAccount) => {
  const responce = await db.subAccount.upsert({
    subaccount.details
  })
  console.log(JSON.stringify(responce)); // It is logging the object which the data user entered
  // which means data is entered into db successfully
  // I checked manually with prisma studio and it is inserted fine.
  
  return responce; // important to return responce and I did return it.
}

When I execute the code using bun run dev and submit the form,
Data is inserted into DB perfectly but the response to the client side onSubmit function is always undefined. upsertSubAccount is returning a valid object with valid data, as soon as I receive it in onSubmit and log it, it is undefined.

Why is this happening and I am suspicious about using server function(upsertsubAccount, correct me if I am wrong) in an onSubmit function in client component.
Still figuring out server functions and when to use/avoid them.
I will try using form action, but I need to know why it is failing with onSubmit.