React Native Error: Rendered more hooks than during the previous render

my first question here, I apologize for my English as a translator, Note: I'm Brazilian. I'm developing an app and I was trying to implement a function to present the onboarding screen only on the first time of use

Imports

import React from 'react';
import react, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import OnboardingScreen from './src/screens/Onboarding/OnboardingScreen';
import LoginScreen from './src/screens/LoginScreen';

Body

const [isFirtsLaunch, setIsFirtsLaunch] = react.useState(() => {});
    useEffect(() => {
        AsyncStorage.getItem('alreadyLaunched').then((value) => {
            if (value == null) {
                AsyncStorage.setItem('alreadyLaunched', 'true');
                setIsFirtsLaunch(true);
            } else {
                setIsFirtsLaunch(false);
            }
        });
    }, []);
    useEffect(() => {
        if (isFirtsLaunch === null) {
            return null;
        } else if (isFirtsLaunch === true) {
            return (
                <NavigationContainer>
                    <AppStack.Navigator headerModel="none">
                        <AppStack.Screen
                            name="Onboarding"
                            component={OnboardingScreen}
                            options={{ headerShown: false }}
                        />
                        <AppStack.Screen
                            name="Login"
                            component={LoginScreen}
                            options={{ headerShown: false }}
                        />
                    </AppStack.Navigator>
                </NavigationContainer>
            );
        } else {
            <LoginScreen />;
        }
    });
};