I am using firebase in a react native app along with the spinner from 'react-native-loading-spinner-overlay'. Im trying to show the spinner while the user is authenticating to firebase but the spinner isn't showing up. This is the function that handles an user trying to auth:

const [spinnerState, setSpinnerState] = useState(false)
...
const handleAuthenticationAttempt = () => {
            if (emailStatus == false || passwordStatus == false) {
                  Alert.alert(
                        "ERROR",
                        "Something went wrong... Please make sure you have inserted all data correctly.",
                        [{
                              text: "OK",
                              style: "ok",
                        }])
            } else {
                  const auth = getAuth(app);
                  setSpinnerState(true)
                  signInWithEmailAndPassword(auth, email, password)
                        .then(() => {
                              setSpinnerState(false)
                              console.log("success")
                        })
                        .catch((error) => {
                              Alert.alert(
                                    "ERROR",
                                    "Something went wrong... Please check the email and password you entered is correct: " + error.code,
                                    [{
                                          text: "OK",
                                          style: "ok",
                                    }])
                        })
            }
      }

This is my render:

<View style={styles.container}>
                  <Spinner
                        visible={spinnerState}
                        textContent={'Loading...'}
                        textStyle={{ color: 'rgb(200, 200, 200)' }} />
                  <View style={styles.containerSvg}>
                        <LinearBackground />
                  </View>
                  <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
                        <View style={styles.containerAlign}>
                              // OTHER INPUTS
                              <ButtonAction onPress={handleAuthenticationAttempt} text={'LOGIN'} backgroundColor='rgba(20, 120, 160, 0.6)' />
                        </View>
                  </TouchableWithoutFeedback>
            </View>

In theory this should work but it doesn't. I have changed the spinner location multiple times but it never seems to show up. Any ideas on what's going on?

EDIT: Even when using setTimeout, the spinner never actually shows up.