javascript – The onPress button in my native app isnt working for some cause

import { useState } from "react";
import {
  View,
  ScrollView,
  SafeAreaView,
  Textual content,
  TouchableOpacity,
  StyleSheet,
  Modal,
} from "react-native";
import { Stack, useRouter } from "expo-router";
import { COLORS, icons, pictures, SIZES } from "../constants";
import {
  Nearbyjobs,
  Popularjobs,
  ScreenHeaderBtn,
  Welcome,
} from "../elements";

const Residence = () => {
  const router = useRouter();
  const [searchTerm, setSearchTerm] = useState("");
  const [openNav, setOpenNav] = useState(false);

  const toggleNavigation = () => {
    setOpenNav(false);
  };

  return (
    <SafeAreaView model={{ flex: 1, backgroundColor: COLORS.lightWhite }}>
      <Stack.Display
        choices={{
          headerStyle: {
            backgroundColor: COLORS.lightWhite,
          },
          headerShadowVisible: false,
          headerLeft: () => (
            <TouchableOpacity onPress={toggleNavigation}>
              <ScreenHeaderBtn iconUrl={icons.menu} dimension="60%" />
            </TouchableOpacity>
          ),
          headerRight: () => (
            <ScreenHeaderBtn iconUrl={pictures.profile} dimension="100%" />
          ),
          headerTitle: "Jobbed",
        }}
      />

      <ScrollView showsVerticalScrollIndicator={false}>
        {openNav ? (
          <Textual content>Nav is working</Textual content>
        ) : (
          <Textual content>Not working error !!!!!</Textual content>
        )}
        <View model={{ flex: 1, padding: SIZES.medium }}>
          <Welcome
            searchTerm={searchTerm}
            setSearchTerm={setSearchTerm}
            handleClick={() => {
              if (searchTerm) {
                router.push(`/search/${searchTerm}`);
              }
            }}
          />
          <Popularjobs />
          <Nearbyjobs />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const types = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: "middle",
    alignItems: "middle",
    backgroundColor: "rgba(0, 0, 0, 0.5)", // semi-transparent background
  },
  menu: {
    backgroundColor: COLORS.lightWhite,
    padding: SIZES.medium,
    borderRadius: 10,
  },
});

export default Residence;

i need to have a navbar part however im testing it with simply an strange view for now, the onPress doesnt set off the use state and that i dont know why. See how im testing it.

   {openNav ? (
          <Textual content>Nav is working</Textual content>
        ) : (
          <Textual content>Not working error !!!!!</Textual content>
        )}

The final code is working cos it exhibits the choice of when the state is fake, the issue now could be the onpress isnt trigeering the operate to vary the state