initialState of useActionState is returning as first response

[Moemen12]

Summary

Hello
i have this client component and im using useActionState along with react hook form to make validation on both client and server side , my main problem is when i submit the form with registered email for example , instead of getting this response directly on the console , im getting the initialstate that im passing in useActionState fn (null in my code) ,then when i submit the form second or several times after the first time i will get desired response . so how can i solve the problem and return directly that error ?
notice : im trying actually to dont use useEffect hook..

{
      message: "Email already exists, please use a different email or login.",
      status: 400,
  }
``


### Additional information

```js
"use client";
import { signup } from "@/lib/actions/user.actions";
import { SignupFormSChema } from "@/lib/validations/validation";
import { RegisterParams } from "@/types";
import { zodResolver } from "@hookform/resolvers/zod";
import React, { useActionState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";

const MyForm: React.FC = (): JSX.Element => {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm<RegisterParams>({
    resolver: zodResolver(SignupFormSChema),
  });

  const [response, action, pending] = useActionState(signup, null);

  const onSubmit: SubmitHandler<RegisterParams> = (data) => {
    action(data);

    console.log(response);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="w-4/5 sm:w-1/2">
      <div className="mb-4">
        <label
          htmlFor="name"
          className="block text-gray-700 text-sm font-bold mb-2"
        >
          Name
        </label>
        <input
          {...register("name")}
          type="text"
          id="name"
          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
        />
        {<p className="text-red-500 text-xs mt-1">{errors.name?.message}</p>}
      </div>
      <div className="mb-4">
        <label
          htmlFor="email"
          className="block text-gray-700 text-sm font-bold mb-2"
        >
          Email
        </label>
        <input
          type="email"
          id="email"
          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          {...register("email")}
        />
        {<p className="text-red-500 text-xs mt-1">{errors.email?.message}</p>}
      </div>
      <div className="mb-6">
        <label
          htmlFor="password"
          className="block text-gray-700 text-sm font-bold mb-2"
        >
          Password
        </label>
        <input
          type="password"
          id="password"
          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          {...register("password")}
        />
        {
          <p className="text-red-500 text-xs mt-1">
            {errors.password?.message}
          </p>
        }
      </div>
      <button
        type="submit"
        className="w-full bg-blue-500 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
        disabled={pending}
      >
        {pending ? "Submitting..." : "Sign up"}
      </button>
    </form>
  );
};

export default MyForm;

"use server";

import { saltAndHashPassword } from "@/utils/functions";
import { SignupFormSChema } from "../validations/validation";
import User from "../models/user.model";
import { connectToDatabase } from "../mongo/db";
import { createSession } from "../mongo/session";
import { RegisterParams } from "@/types";

export async function signup(prevState: unknown, registerData: RegisterParams) {
  const validationResult = SignupFormSChema.safeParse(registerData);


  if (!validationResult.success) {
    return {
      errors: validationResult.error.flatten().fieldErrors,
    };
  }

  const { name, email, password } = validationResult.data;

  // Connect to the database
  await connectToDatabase();

  // Check for existing user
  const existingUser = await User.findOne({ email }).exec();

  // Return an error if the user already exists
  if (existingUser) {
    return {
      message: "Email already exists, please use a different email or login.",
      status: 400,
    };
  }

  // Hash the password
  const hashedPass = await saltAndHashPassword(password);

  try {
    // Create a new user
    const user = await User.create({ name, email, password: hashedPass });

    if (!user) {
      return {
        message: "An error occurred while creating your account.",
      };
    }

    // Create a user session
    await createSession(user._id.toString());

    return {
      message: "User registered successfully",
      status: 200,
    };
  } catch (error) {
    console.error("Error during user creation:", error);
    return {
      error: "An error occurred during signup. Please try again.",
    };
  }
}


``

Example

No response