Fake authentication state with redux/toolkit updates only on second click

Question

I'm new with react and redux/toolkit, I'm trying to create a fake authentication. The create account function button updates the state on second click, the first click validate the input form only.

the following code, is the create account function

const createAccount = (event) => {
    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);

    const findUser = userList.find((user) => user.email === email);
    // console.log(typeof findUser);
    if (validated) {
      if (findUser) {
        alert("this user already exist, login?");
      } else {
        dispatch(signup(newAccount));
      }
      navigate("/signin", { replace: true });
    }
  };

this one is my signup reducer action :

signup: (state, action) => {
      const newUser = {
        id: uuidv4(),
        ...action.payload,
      };
      return [...state, newUser];
    },