Error: Rendered fewer hooks than expected. When using i18next.changeLanguage()

Question

I got the problem when the first change language in App.tsx file.It seems that some people have faced similar issues like me, but the solutions provided don't seem to work in my case.
Please give me some assistance.
Thanks in advance.
Error:

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. This error is located at: in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MimoStake(RootComponent), js engine: hermes 

My code below:

function AuthStack() {
  const [showLng, setShowLng] = useState(false)
  const {t} = useTranslation();

  const changeLanguage = (lng:string) => {
    if(i18next.language == lng) {
      setShowLng(!showLng)
      return
    }
    i18next.changeLanguage(lng)
    setShowLng(!showLng)
  }

  return(
    <Stack.Navigator screenOptions={{
      contentStyle:{backgroundColor: '#fff'}, 
      headerShadowVisible: false,
      headerTitle:'',
      headerRight: () => (
        <TouchableOpacity onPress={() => setShowLng(!showLng)}>
          <View className='flex flex-row items-center'>
            <Text className='text-[16px] font-[500] text-[#01b763]'>{t('languages')} </Text>
            <FontAwesome name='language' size={24} color='#616161' /> 
          </View>
        </TouchableOpacity>
      ),
      headerLeft: () => (
        <View className={`${showLng?'flex':'hidden'}`}>
          <FlatList
            data={Object.keys(languageResources)}
            renderItem={({item}) => (
              <TouchableOpacity onPress={() => changeLanguage(item)}>
                <View className={`flex border-b-[2px] ${i18next.language == item?'border-[#01b763]':'border-[#616161]'}`}>
                  <Text className={`font-[500] text-[16px] ${i18next.language == item?'text-[#01b763]':'text-[#616161]'}`}>{
                    //@ts-ignore
                  languagesList[item].nativeName}</Text>
                </View>
              </TouchableOpacity>
            )}
          />
        </View>
      )
      }}>
      <Stack.Screen name='ThirdParty' component={ThirdParty} />
      <Stack.Screen name='Login' component={Login}/>
      <Stack.Screen name='Registor' component={Registor}/>
      <Stack.Screen name='ForgotPassword' component={ForgotPassword}/>
    </Stack.Navigator>
  )
} ```

Expected result:
[expected_result][1]


  [1]: https://i.stack.imgur.com/eXROh.png