Displaying loading indicator screen accroding to state

I'm attempting to show a simple loading screen component when the data is connecting to firebase (creating a user, or login in). I have set all the indicators with a useState, although when the loading occurs, the screen doesn't pop up.
My register screen:

export function Register({ navigation }: any) {  const [showModal, setShowModal] = useState(false);  const [isLoading, setIsLoading] = useState(false);  useEffect(() => {    if (isLoading) return <Loading />;  }, [isLoading]);  return (<TouchableWithoutFeedback onPress={Keyboard.dismiss}><><Modal          visible={showModal}          text={i18n.t('registerModal.title')}          state="success"          description={i18n.t('registerModal.description')}          buttonText={i18n.t('registerModal.goToLogin')}          navigation={undefined}          setShowModal={setShowModal}          onPress={() => {            navigation.navigate('SignIn');            setShowModal(false);          }}        /><Container><ArrowContainer><ArrowTouchable onPress={() => navigation.goBack(null)}><ArrowBack width={24} height={24} /></ArrowTouchable></ArrowContainer><TitleContainer><Title>{i18n.t('signup.title')}</Title></TitleContainer><Form setShowModal={setShowModal} setIsLoading={setIsLoading} /><TextContainer><Text>{i18n.t('signup.alreadyHaveAccount')}</Text><TouchableText onPress={() => navigation.navigate('SignIn')}><SignUpText>{i18n.t('signup.singIn')}</SignUpText></TouchableText></TextContainer></Container></></TouchableWithoutFeedback>  );}

My Form with sets the loading state:

export function Form({ setShowModal, setIsLoading }: any) {  const {    control,    handleSubmit,    formState: { errors },  } = useForm({    resolver: yupResolver(schema),  });  async function handleUserRegister(data: FormData) {    setIsLoading(true);    const incomingData = await registerWithEmailAndPassword(data);    if (incomingData) {      setIsLoading(false);      setShowModal(true);    }    setIsLoading(false);  }  useEffect(() => {    ToastShowManagement(i18n.t('signup.error'), errors);  }, [errors]);  return (<Container><ControlledInput        name="username"        control={control}        icon="at-sign"        placeholder={i18n.t('signup.username')}        error={errors.username}      /><ControlledInput        name="name"        control={control}        icon="user"        placeholder={i18n.t('signup.name')}        error={errors.name}      /><ControlledInput        control={control}        name="email"        icon="mail"        placeholder={i18n.t('signup.email')}        keyboardType="email-address"        autoCapitalize="none"        error={errors.email}      /><ControlledInput        control={control}        name="password"        icon="lock"        placeholder={i18n.t('signup.password')}        secureTextEntry        error={errors.password}      /><ControlledInput        control={control}        name="passwordConfirmation"        icon="lock"        placeholder={i18n.t('signup.confirmPassword')}        secureTextEntry        error={errors.passwordConfirmation}      /><PrimaryButton        text={i18n.t('signup.button')}        onPress={handleSubmit(handleUserRegister as any)}        style={{ marginTop: 24 }}      /></Container>  );}