useState does not update the state within .catch after dispatching of asynk thunk

In the following code setError does not update error in the catch after async thunk from redux-toolkit.

  const [error, setError] = useState("");
  const handleLogin = () => {
    dispatch(userLogin({ email, password }))
      .unwrap()
      .then(() => {
        if (userInfo) {
          navigate("/profile");
        }
      })
      .catch((err) => {
        setError(err) // does not work
      });
  };

<button onClick={handleLogin}>Login</button>

export const userLogin = createAsyncThunk(
  "auth/login",
  async ({ email, password }, thunkAPI) => {
    try {
      const { data } = await userLoginRequest(email, password);
      return data;
    } catch (error) {
      return thunkAPI.rejectWithValue(ERR_USER_LOGIN); 
      // ERR_USER_LOGIN is just a constant string from another file
    }
  }
);

I know that useState does not apply changed immediatly but in my case it ignores changes at all. I suppose that the problem can be related to the scope or something like this. So I've tried to use additional callback which I sent as a parameter and change the state through it but it also does not work.

Your userLogin function actually has caught the error, making handleLogin catch not catch anything.
You can throw the error within userLogin, so handleLogin can catch the error by itself.

export const userLogin = createAsyncThunk(
  "auth/login",
  async ({ email, password }, thunkAPI) => {
    try {
      const { data } = await userLoginRequest(email, password);
      return data;
    } catch (error) {
      thunkAPI.rejectWithValue(ERR_USER_LOGIN); 
      // Add this
      throw error;
    }
  }
);