React useState changing value but not rerendering?

Question

I am trying to create a custom redirection for my AWS Authenticator component, where the redirect URL will vary depending on if the user is signing up or signing in:

export default function Login() {
  const { route } = useAuthenticator(context => [context.route]);
  const [redirectURL, setRedirectURL] = useState(getHomePath());

  if (route === "signIn" && redirectURL !== getHomePath()) {
    setRedirectURL(getHomePath());
  } else if (route === "signUp" && redirectURL !== getCreateProfilePath()) {
    setRedirectURL(getCreateProfilePath());
  }

  console.log(redirectURL);
  return route === "authenticated" ? (
    <Navigate to={redirectURL} />
  ) : (
    <Authenticator
      // Default to Sign Up screen
      initialState="signUp"
      // Customize `Authenticator.SignUp.FormFields`
      signUpAttributes={["birthdate"]}
      formFields={formFields}
      components={components}
      services={{
        async validateCustomSignUp(formData) {
          if (!formData.acknowledgement) {
            return {
              acknowledgement: redirectURL
            };
          }
        }
      }}
    />
  );
}

To do this, I set the redirect URL using a state hook that depends on whether the user selected "signIn" or "signUp". This appears to work, as I can see in the console that the redirectURL changes upon selection. However, it seems that the component itself is not re-rendered (event though the value changes); redirectURL does not propagate to the return statement and the Authenticator maintains the default value and does not change.

Is there a reason for this?

Answer 1

Please see if this solution resolves your issue

export default function Login() {
  const { route } = useAuthenticator(context => [context.route]);
  const [redirectURL, setRedirectURL] = useState(getHomePath());


   useEffect(() => {
if (route === "signIn" && redirectURL !== getHomePath()) {
    setRedirectURL(getHomePath());
  } else if (route === "signUp" && redirectURL !== getCreateProfilePath()) {
    setRedirectURL(getCreateProfilePath());
  }
   }, [route])
  

  console.log(redirectURL);
  return route === "authenticated" ? (
    <Navigate to={redirectURL} />
  ) : (
    <Authenticator
      // Default to Sign Up screen
      initialState="signUp"
      // Customize `Authenticator.SignUp.FormFields`
      signUpAttributes={["birthdate"]}
      formFields={formFields}
      components={components}
      services={{
        async validateCustomSignUp(formData) {
          if (!formData.acknowledgement) {
            return {
              acknowledgement: redirectURL
            };
          }
        }
      }}
    />
  );
}