diff --git a/package/src/components/ChannelList/hooks/usePaginatedChannels.ts b/package/src/components/ChannelList/hooks/usePaginatedChannels.ts
index 4211e7b046..30213cace5 100644
--- a/package/src/components/ChannelList/hooks/usePaginatedChannels.ts
+++ b/package/src/components/ChannelList/hooks/usePaginatedChannels.ts
@@ -66,7 +66,7 @@ export const usePaginatedChannels = <
 }: Parameters<StreamChatGenerics>) => {
   const [error, setError] = useState<Error | undefined>(undefined);
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(false);
-  const activeQueryType = useRef<QueryType | null>('queryLocalDB');
+  const [activeQueryType, setActiveQueryType] = useState<QueryType | null>('queryLocalDB');
   const activeChannels = useActiveChannelsRefContext();
   const isMountedRef = useIsMountedRef();
   const { client } = useChatContext<StreamChatGenerics>();
@@ -114,7 +114,7 @@ export const usePaginatedChannels = <
     setError(undefined);
     activeRequestId.current++;
     const currentRequestId = activeRequestId.current;
-    activeQueryType.current = queryType;
+    setActiveQueryType(queryType);
 
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
@@ -152,7 +152,7 @@ export const usePaginatedChannels = <
       // querying.current check is needed in order to make sure the next query call doesnt flick an error
       // state and then succeed (reconnect case)
       if (retryCount === MAX_NUMBER_OF_RETRIES && !isQueryingRef.current) {
-        activeQueryType.current = null;
+        setActiveQueryType(null);
         console.warn(err);
 
         setError(
@@ -166,7 +166,7 @@ export const usePaginatedChannels = <
       return queryChannels(queryType, retryCount + 1);
     }
 
-    activeQueryType.current = null;
+    setActiveQueryType(null);
   };
 
   const refreshList = async () => {
@@ -229,7 +229,7 @@ export const usePaginatedChannels = <
         return false;
       }
 
-      activeQueryType.current = null;
+      setActiveQueryType(null);
 
       return true;
     };
@@ -279,7 +279,7 @@ export const usePaginatedChannels = <
     error,
     hasNextPage,
     loadingChannels:
-      activeQueryType.current === 'queryLocalDB'
+      activeQueryType === 'queryLocalDB'
         ? true
         : // Although channels.length === 0 should come as a given when we have !channelListInitialized,
           // due to the way offline storage works currently we have to do this additional
@@ -290,7 +290,7 @@ export const usePaginatedChannels = <
           pagination?.isLoading || (!channelListInitialized && channels.length === 0),
     loadingNextPage: pagination?.isLoadingNext,
     loadNextPage: channelManager.loadNext,
-    refreshing: activeQueryType.current === 'refresh',
+    refreshing: activeQueryType === 'refresh',
     refreshList,
     reloadList,
     staticChannelsActive,