onSelect prop on channellist of getstream.io not doing anything

The onselect prop on the channelListScreen component isnt doing anything.I tried to console log to get some type of response. i tried looking through the docs and it says just this should be enough, i was following a tutorial from getstream.io to begin with and I cant find what i did different thats making it not work.

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button, SafeAreaView } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { useChatClient } from "./useChatClient";
import { AppProvider } from "./AppContext";
import { OverlayProvider, Chat, ChannelList, Channel, MessageList, MessageInput, List } from "stream-chat-expo";
import { StreamChat } from "stream-chat";
import { chatApiKey, chatUserId } from "./chatConfig";
import { useAppContext } from "./AppContext";
import { GestureHandlerRootView } from "react-native-gesture-handler";

const Stack = createNativeStackNavigator();

const chatClient = StreamChat.getInstance(chatApiKey);

const filters = { members: { $in: [chatUserId] } };

const ChannelScreen = (props) => {
  const { channel } = useAppContext();
  return (
    <Channel channel={channel}>
      <MessageList />
      <MessageInput />
    </Channel>
  );
};
const sort = {
  last_message_at: -1,
};

// const Home = (props) => {
//   const { navigation } = props;
//   return (
//     <Text>
//       Home
//       <Button title="Go to Home" onPress={() => navigation.navigate("ChannelListScreen")} />{" "}
//     </Text>
//   );
// };

const test = () => {
  console.log(`selected`);
};
const ChannelListScreen = (props) => {
  const { setChannel } = useAppContext();
  return (
    <ChannelList
      onSelect={(channel) => {
        const { navigation } = props;
        setChannel(channel);
        navigation.navigate("ChannelScreen");
        console.log(channel);
      }}
      filters={filters}
      sort={sort}
    />
  );
};

const NavigationStack = (props) => {
  const { clientIsReady } = useChatClient();

  if (!clientIsReady) {
    return <Text>Loading chat...</Text>;
  }

  return (
    <OverlayProvider>
      <Chat client={chatClient}>
        <Stack.Navigator>
          {/* <Stack.Screen name="Home" component={Home} /> */}
          <Stack.Screen name="ChannelListScreen" component={ChannelListScreen} />
          <Stack.Screen name="ChannelScreen" component={ChannelScreen} />
        </Stack.Navigator>
      </Chat>
    </OverlayProvider>
  );
};

export default function App() {
  return (
    <AppProvider>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <SafeAreaView style={{ flex: 1 }}>
          <NavigationContainer>
            <NavigationStack />
          </NavigationContainer>
        </SafeAreaView>
      </GestureHandlerRootView>
    </AppProvider>
  );
}

I need it to navigate to the specific channel list thats been clicked on. this is my first time posting here, so if the code isnt enough please do ask for more because im not sure exactly what i need to share. Thank you in advance:).