Navigating to a different page in React Native. Error: Cannot read property 'isReady' of undefined

Question

I am a React Native beginner trying to create an app. Here I want to go to a different page when the user clicks on a NearbyJobCard, however I get the following error: Cannot read property 'isReady' of undefined

This is my current code.

NearbyJobs.jsx:

import { View, Text, TouchableOpacity, ActivityIndicator, Touchable } from 'react-native'
import { useRouter } from 'expo-router'
import { COLORS } from '../../../constants'
import NearbyJobCard from '../../common/cards/nearby/NearbyJobCard'
import useFetch from '../../../hooks/useFetch.js'

import styles from './nearbyjobs.style'

const Nearbyjobs = () => {
  const router = useRouter();
  const { data, isLoading, error } = useFetch("search", {
    query: "React developer",
    num_pages: "1",
  });



  console.log(data)
  console.log(data.length)

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>
          Nearby jobs
        </Text>
        <TouchableOpacity>
          <Text style={styles.headerBtn}>
            Show all
          </Text>
        </TouchableOpacity>
      </View>
      <View style={styles.cardsContainer}>
        {isLoading ? (
          <ActivityIndicator size="large" color={COLORS.primary} />
        ) : error ? (
          <Text>Something went wrong</Text>
        ) : (
          data?.map((job) => (
            <NearbyJobCard
              job={job}
              key={`nearby-job-${job.job_id}`}
              handleNavigate={() => router.push(`/job-details/${job.job_id}`)}
            />
          ))
        )}
      </View>
    </View>
  )
}

export default Nearbyjobs

NearbyJobCard.jsx:

import { View, Text, TouchableOpacity, Image } from 'react-native'
import { checkImageURL } from '../../../../utils'

import styles from './nearbyjobcard.style'

const NearbyJobCard = ({ job, handleNavigate }) => {
  return (
    <TouchableOpacity
      style={styles.container}
      onPress={() => handleNavigate()}
    >
      <TouchableOpacity style={styles.logoContainer}>
        <Image 
          source={{ uri: checkImageURL(job.employer_logo)
            ? job.employer_logo : "https://t4.ftcdn.net/jpg/05/05/61/73/360_F_505617309_NN1CW7diNmGXJfMicpY9eXHKV4sqzO5H.jpg",}}
          // source={{ uri: item.employer_logo }}
          resizeMode="contain"
          style={styles.logoImage}
        />  
      </TouchableOpacity>
      
      <View style={styles.textContainer}>
        <Text style={styles.jobName} numberOfLines={1}>
          {job.job_title}
        </Text>
        <Text style={styles.jobType}>
          {job.job_employment_type}
        </Text>
      </View>
    </TouchableOpacity>
  )
}

export default NearbyJobCard

The current error I am getting is TypeError: Cannot read property 'isReady' of undefined, js engine: hermes, and I cannot seem to figure out what is wrong.

I'd at least expect to get an "Unmatched route" message, not what I am currently getting.