React Native calling actions in wrong order

I'm building a login form for my react native app. So there is a username field, a password field and a login button.

I have a formReducer:

const formReducer = (state, action) => {
  if (action.type === FORM_INPUT_UPDATE) {
    const updatedValues = {
      ...state.inputValues,
      [action.input]: action.value
    };
    const updatedValidities = {
      ...state.inputValidities,
      [action.input]: action.isValid
    };
    let updatedFormIsValid = true;
    for (const key in updatedValidities) {
      updatedFormIsValid = updatedFormIsValid && updatedValidities[key];
    }
    return {
      formIsValid: updatedFormIsValid,
      inputValidities: updatedValidities,
      inputValues: updatedValues
    }
  }
  return state
}

This handler deals with both the text fields:

  const inputChangeHandler = useCallback(
    (inputIdentifier, inputValue, inputValidity) => {
      dispatchFormState({
        type: FORM_INPUT_UPDATE,
        value: inputValue,
        isValid: inputValidity,
        input: inputIdentifier
      })
    },
    [dispatchFormState]
  )

This handler deals with the login button:

  const authHandler = async () => {
    let action
      action = authActions.login(
        formState.inputValues.username,
        formState.inputValues.password
      )
    setError(null)
    setIsLoading(true)
    try {
      await dispatch(action)
      setIsLoading(false)
      props.navigation.navigate('App')
    } catch (err) {
      setError(err.message)
      setIsLoading(false)
    }
  }

The problem I'm having is that when the authHandler is called only the username is set and not the password. The password gets set after the login call. If I click the login button a second time it works correctly.

How do I make sure that the password event completes before the button press starts?