Form submission router.push function not working !

[Ok9xNirab]

I'm using NextJs 14.1.0 with App router.

Got this error from console after submitting form couple of times:

Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside `Router`

LoginForm.tsx:

"use client";
import { ReloadIcon } from "@radix-ui/react-icons";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/use-toast";
import Login from "@/actions/login";
import { useRouter } from "next/navigation";

const FormSchema = z.object({
  email: z.string().email(),
  password: z.string().min(3, "Password must contain at least 3 character(s)"),
});

export default function LoginForm() {
  const router = useRouter();
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    reValidateMode: "onSubmit",
    defaultValues: {
      email: "",
      password: "",
    },
  });

  console.log("rending ...");

  async function onSubmit(data: z.infer<typeof FormSchema>) {
    const { success, message } = await Login(data.email, data.password);

    if (!success) {
      return toast({
        title: message,
        variant: "destructive",
      });
    }

    toast({
      title: "Login successfull!",
    });

    router.push("/");
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder="[email protected]" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Password</FormLabel>
              <FormControl>
                <Input type="password" placeholder="******" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button type="submit" disabled={form.formState.isSubmitting}>
          {form.formState.isSubmitting && (
            <ReloadIcon className="mr-2 animate-spin" />
          )}
          Submit
        </Button>
      </form>
    </Form>
  );
}

Login.ts:

"use server";

import Auth from "@/types/Auth";
import { cookies } from "next/headers";

export default async function Login(email: string, password: string) {
  const res = await fetch(process.env.API_URL + "/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ email, password }),
  });

  const data = (await res.json()) as Auth | { message: string };

  if (res.status === 422) {
    const error = data as { message: string };
    return {
      success: false,
      message: error.message,
    };
  }

  const user = data as Auth;

  cookies().set("token", user.token);
  cookies().set("user", JSON.stringify(user.user));

  return {
    success: true,
  };
}

[Ok9xNirab]

I've found the answer from a NextJs community discussion :

vercel/next.js#58940 (reply in thread)