Error useEffect - ne rentre pas dans la fonction de retour

Hello all,

Je rencontre un petit problème avec mon useEffect. C'est un projet mobile en React Native en utilisant expo.
Je souhaite faire une requet pour charger tous les chats d'un utilisateur lorsqu'il se connecte.

Ce que je fais

Dans la vue "Messagerie" si aucun utilisateur n'est connecté j'affiche la page de connexion sinon s'il y a un utilisateur de connecté je fais une request sur mon api pour récupéer tous les chats de l'utilisateur grace à son ID.

Pour ce faire j'utilise le hook useEffect(). Si je me connecte depuis une autre vue que "Messagerie" et que je me rend sur la vue "Messagerie", les chats sont bien récupéré.

const { data: chats = [], error, loading, request: loadChats, setData: setChats} = useApi(ChatService.getUserChats);
const { user } = useContext(AuthContext);
const isMounted = useRef(null)

useEffect(() => {
    console.log("Enter useEffect")
    isMounted.current = true;

    if(isMounted.current){
      if(user != undefined && user != null){
        loadChats(user.userId);
      }
    }    

    return () => {
      console.log("Exit useEffect");
      isMounted.current = false;
    }
  }, [user])

  return (
    <Screen>
      { user ? 
      <>
        { loading && <ActivityIndicator size="large"/> }

        { 
          error && 
          <View style={styles.errorContainer}>
            <Text style={styles.errorContainerText}>Une erreur est survenue lors de l'affichage de vos messages.</Text>
            <Button title="Rafraichir" onPress={handleRefresh} />
          </View>
        }

        {
          chats &&

          <FlatList
            data={chats}
            extraData={chats}
            keyExtractor={(chat) => chat._id}
            renderItem={({ item }) => (
              <ListItem
                title={item.advert.title}
                subtitle={item.message.message.text}
                image={item.picture ? item.picture : require("../assets/profile.png")}
                onPress={() => showChat(item)}
                renderRightActions={() => (
                  <ListItemDelete onPress={() => handleDelete(item._id)} />
                )}
              />
            )}
            ItemSeparatorComponent={ListItemSeparator}
            refreshing={refreshing}
            onRefresh={() => { handleRefresh() }}
          />
        }

      </> : 
        <LoginScreen />
      }
    </Screen>
  );

Ce que je veux

Charger la liste des chats quand l'utilisateur se connecte en étant sur la vue "Messagerie".

Ce que j'obtiens

J'obtient deux erreurs. Une sur ma console et une sur l'application expo.

La premère me dit :
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicate a memory leak in your application. To fix, cancel all subscriptions and asynchronous task in %s.%s, a useEffect cleanup function.

La seconde me dit :
Invariant Violation: Tried to get frame for out of range index NaN. This error is located at: in VirtualizedList (at FlatList.js) in FlatList (at ChatlistScreen.js).

Mais je pense que la seconde erreur est du à la valeur vide de "chats".

D'ailleur le console.log dans le return () du useEffect ne s'affiche pas et la valeur de isMounted ne passe pas à false.

Voilà :) J'ai vraiment cherché partout une solution j'ai essayé beaucoup de méthodes mais là je ne comprends pas comment ça fonctionne.... Merci par avance pour votre aide !