I ended up using onPressOut, and I assume onPressIn also works as @Tushar suggested.
on _layout.js
import { Stack, router } from "expo-router";
import { Text, StyleSheet, TouchableOpacity } from "react-native";
<Stack
  screenOptions={{         
    headerTintColor: "#f0f",
    ...
    headerRight: () => (
      <TouchableOpacity onPressOut={() => router.push("/about")}>
        <Text style={styles.buttonText}>Help</Text>
      </TouchableOpacity>
    ),
  }}
/>
any other page in case I need a different action on the buttonText
products.js
<Stack.Screen
  options={{    
    headerTintColor: "#a5c",
    ....
    headerRight: () => (
    <TouchableOpacity onPressOut={() => router.push("/new")}>
      <Text style={styles.buttonText}>New Product</Text>
    </TouchableOpacity>
    ),
   }}
/>
This way I could still use expo version 52 package.json
{
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-community/datetimepicker": "8.2.0",
    "@react-native-picker/picker": "2.9.0",
    "expo": "~52.0.41",
    "expo-camera": "~16.0.10",
    "expo-constants": "~17.0.8",
    "expo-font": "~13.0.4",
    "expo-linking": "~7.0.5",
    "expo-router": "~4.0.19",
    "expo-splash-screen": "~0.29.22",
    "expo-status-bar": "~2.0.1",
    "nativewind": "^2.0.11",
    "react": "18.3.1",
    "react-native": "0.76.7",
    "react-native-dotenv": "^3.4.11",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0"
  },
}