I have a component in my Navigation.tsx which controls the routes within my application. The component sits inside one of my Stack.Screen's under headerRight . Im trying to navigate to a different screen when the component is clicked. However, im unable to get that working for this particular component. Routing outside my Navigation file works perfectly fine, but not within.

Im unable to figure out what i am missing or what needs to be changed.

Code below: headerRight under ItemDetails

export default function Navigation( { navigation }) {
const Stack = createStackNavigator();

const MyTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: '#FFF',
    }
}

return (
    <NavigationContainer theme={MyTheme}>
        <Stack.Navigator initialRouteName="Home">

            <Stack.Screen name="Home" component={Home} options={({route}) => ({
                headerShown: false,
            })}/>
            <Stack.Screen name='CartDetails' component={CartDetails}/>
            <Stack.Screen name="ItemDetails" component={ItemDetails} options={({route}) => ({
                title: false,
                headerTitle: false,
                headerBackTitleVisible: false,
                headerTransparent: true,
                headerShadowVisible: false,
                headerRight: () => (
                    <TouchableOpacity onPress={() => { navigation.navigate('CartDetails')}}>
                        <CartIcon />
                    </TouchableOpacity>
                ),
                headerBackImage: () => (
                    
                        <View style={{backgroundColor: '#ffffff', borderRadius: '50%', marginLeft: 15, marginBottom: 5}}>
                            <Entypo name="chevron-small-left" size={30} color="#37BD6B"/>
                        </View>
                )
            })} />

        </Stack.Navigator>
    </NavigationContainer>
)

}

Thanks in advance