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

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

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

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

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

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

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

export default Home;

i want to have a navbar component but im testing it with just an ordinary view for now, the onPress doesnt trigger the use state and i dont know why. See how im testing it.

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

The general code is working cos it shows the option of when the state is false, the problem now is the onpress isnt trigeering the function to change the state