stack is not changing on changing state in react-native

I'm building eCommerce using react-native-cli. I create a custom bottom navbar to move between the tab I'm using context API state with a switch statement. But when I add the just one screen its work perfectly but when I add the react-navigation stack and I move to cart it work but when I go back and setScreen('Home') it changing the state but not displaying the homestack it displaying the cart screen but in the cart it active the home icon. What the issue is that? Screen Tabs

const { height, width } = Dimensions.get("window");
const Screen = ({ navigation, route }) => {
  const { screen, setScreen,navVisibility, setNavVisibility } = useContext(Context);
  
  const loadScreen = () => {
    switch (screen) {
      case "Home":
        return <HomeStackScreen />;
      case "Category":
        return <CategoriesScreen />;
      case "Inbox":
        return <Inbox />;
      case "Cart":
        return <CartStackScreen />;
      case "Profile":
        return <LoginScreen />;
      default:
        break
    }
  };

  return (
    <View style={[styles.newContainer]}>
      <View style={{ flex: 1 }}>{loadScreen()}</View>
      <View
        style={{
          position: "absolute",
          bottom: 0,
          backgroundColor: "transparent",
        }}
      >
        {screen == "Cart" || navVisibility == 'ProductShowScreen' ? null : (
          <BottomNav
            screenChange={setScreen}
            screenName={screen}
            navigation={navigation}
          />
        )}
      </View>
    </View>
  );
};

Cart Back Button code

            <TouchableOpacity
              style={styles.headerBackIcon}
              onPress={() => {
                setScreen("Home");
              }}
            >
              <LeftArrowSvg />
            </TouchableOpacity>