I’m trying to figured out how to implement react-query in my react-native app. I’m executing a simple firebase login function from react-query mutation. Then in my signIn component I will call the mutation from a submit button. When I thought it was this simple, I’m keep getting “Error: Should have a queue. This is likely a bug in React. Please file an issue.” However, the code was able to reach the success part of the mutation. Any helps on this would be appreciated as there are only few guidances online that showcase the implementation of react-query with firebase.

These are the full errors:

Running "App" with {"rootTag":231,"initialProps":{}}
 ERROR  Warning: React has detected a change in the order of Hooks called by SignIn. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://react.dev/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useRef                     useRef
2. useState                   useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in SignIn (created by SignMain)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by SignMain)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by SignMain)
    in RCTView (created by View)
    in View (created by SignMain)
    in RCTView (created by View)
    in View (created by KeyboardAvoidingView)
    in RCTView (created by View)
    in View (created by KeyboardAvoidingView)
    in KeyboardAvoidingView (created by SignMain)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by SignMain)
    in SignMain (created by AuthNavigation)
    in AuthNavigation (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in WithSplashScreen (created by App)
    in App (created by AppWrapper)
    in QueryClientProvider (created by AppWrapper)
    in AppWrapper
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in App(RootComponent)
 ERROR  Error: Should have a queue. This is likely a bug in React. Please file an issue.

This error is located at:
    in SignIn (created by SignMain)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by SignMain)
    in RCTView (created by View)
    in View (created by AnimatedComponent(View))
    in AnimatedComponent(View)
    in Unknown (created by SignMain)
    in RCTView (created by View)
    in View (created by SignMain)
    in RCTView (created by View)
    in View (created by KeyboardAvoidingView)
    in RCTView (created by View)
    in View (created by KeyboardAvoidingView)
    in KeyboardAvoidingView (created by SignMain)
    in RCTScrollContentView (created by ScrollView)
    in RCTScrollView (created by ScrollView)
    in ScrollView (created by ScrollView)
    in ScrollView (created by SignMain)
    in SignMain (created by AuthNavigation)
    in AuthNavigation (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in WithSplashScreen (created by App)
    in App (created by AppWrapper)
    in QueryClientProvider (created by AppWrapper)
    in AppWrapper
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in App(RootComponent), js engine: hermes

signIn.tsx

function SignIn() {

  const signInMutation = authAPI_login;
  const validationSchema = loginValidation;

  type SignInFormSchema = z.infer<typeof validationSchema>;

  const {control, handleSubmit, setFocus} = useForm<SignInFormSchema>({
    defaultValues: loginFormData,
    resolver: zodResolver(validationSchema),
  });

  const onSubmit = async (data: any) => {
     signInMutation.mutate({
          email: data.email,
          password: data.password,
        });
  };

  return (
    <View style={styles.rootContainer}>
      <View style={styles.inputContainer}>
        <TxtInput
          height={40}
          width={300}
          control={control}
          name="email"
          placeholder="Email"
          inputMode="email"
          nextFocus={true}
          isLoading={false}
          secureTextEntry={false}
          setNextFocus={() => {
            setFocus('password');
          }}
        />
      </View>
      <View style={styles.inputContainer}>
        <TxtInput
          height={40}
          width={300}
          control={control}
          name="password"
          placeholder="Password"
          inputMode="text"
          isLoading={false}
          secureTextEntry={true}
        />
      </View>
        <Button
          height={40}
          width={300}
          outline={true}
          isListening={true}
          isLoading={false}
          // onPress={handleSubmit(onSubmit)}
          onPress={() => {return onSubmit('test') }}
          >
          Sign In
        </Button>
     
    </View>
  );
}

api.tsx

export async function authSV_login(email: string, password: string) {
  return auth()
    .signInWithEmailAndPassword(email, password)
    .then((auth) => {
      return true
    })
    .catch(error => {
      if (error.code === 'auth/email-already-in-use') {
        console.log('That email address is already in use!');
      }

      if (error.code === 'auth/invalid-email') {
        console.log('That email address is invalid!');
      }

      return false
    });
}

export const authAPI_login = useMutation({
    mutationFn: ({ email, password }: {email: string, password: string}) => authSV_login(email, password),
    onSuccess: async (data) => {
      console.log('success', data);
    },
    onError: async (error) => {
      console.log('error', error);
    },
})