How to navigate to a different screen using notifications in expo sdk 36

Question

I am new to react native and this is the first time I implemented push notifications. I have my navigation defined in a separate folder where I have 3 different user roles navigation. Below is my App.js file which has the notification handler.

export default function App(props) {
  const [fontLoaded, setFontLoaded] = useState(false);
  useEffect(() => {
    Notifications.addListener((notification) => {
      console.log("notification", notification);
      Vibration.vibrate();
      const {
        data: { message },
        origin,
      } = notification;
     if(origin === "selected"){
       props.navigation.navigate("Agent")
      }
     else if (origin === "received")
        Alert.alert("New Push Notification", message, [{ text: "OK" }]);
    });
  }, []);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFont}
        onFinish={() => setFontLoaded(true)}
        onError={(err) => {
          console.log(err);
        }}
      />
    );
  }
  return (
    <Provider store={store}>
      <AppNavigation
        ref={(navigator) => {
          setNavigator(navigator);
        }}
      />
    </Provider>
  );
}

I am not able to navigate to the different screens as I am getting error props.navigation.navigate is undefined. If I have missed providing any other details please mention it and I hope someone helps me with this.