Getting error 'Property X does not exist on type Y' (ts2339) for specific property on object

I'm building a gig listing app with react native and firebase.

Each gig document from the firestore has a timestamp with the following shape:

dateAndTime: {   nanoseconds: XXXXXXXXX   seconds: XXXXXXXX}

When I try to access this property, I get the error

Property 'seconds' does not exist on type 'number'.ts(2339)

This error pops up in the following code in my GigsByDays.tsx component, with a red line under seconds:

          navigation.navigate('GigDetails', {            venue: item.venue,            gigName: item.gigName,            blurb: item.blurb,            isFree: item.isFree,            image: item.image,            genre: item.genre,            dateAndTime: item.dateAndTime.seconds,            tickets: item.tickets,            id:item.id          })

The above code shows props being passed to the GigDetails screen; these props have been typed on my stack navigator, as follows:

homeStack.tsx

import { createStackNavigator } from "@react-navigation/stack";import List from '../screens/List'import Map from '../screens/Map'import Header from "../components/Header";import GigDetails from "../screens/GigDetails";import type { NativeStackScreenProps } from "@react-navigation/native-stack";export interface GigObject {  tickets:string,  venue:string,  dateAndTime: number,  isFree:boolean,  image:string,  genre: string,  gigName:string,  blurb:string,  id?:string,  location?:{longitude:number,latitude:number},}type RootStackParamList = {  Map:undefined,  List:undefined,  GigDetails: GigObject }const Stack = createStackNavigator<RootStackParamList>()export type listProps = NativeStackScreenProps<RootStackParamList, 'List', 'MyStack'>export type mapProps = NativeStackScreenProps<RootStackParamList, 'Map', 'MyStack'>export type gigDetailsProps = NativeStackScreenProps<RootStackParamList, 'GigDetails', 'MyStack'>export const MyStack = () => {  return (<Stack.Navigator        initialRouteName="Map"><Stack.Screen       name="Map"       component={Map}       options={{        headerTitle: () => <Header/>,        headerTitleAlign: 'center',        headerStyle:{          backgroundColor:'#ba9556'        }    }}           /><Stack.Screen       name="List"       component={List}       options={{        headerTitle: () => <Header/>,        headerTitleAlign: 'center',        headerStyle:{          backgroundColor:'#ba9556'        }    }}      /><Stack.Screen       name="GigDetails"       component={GigDetails}       options={{        headerTitle: () => <Header/>,        headerTitleAlign: 'center',        headerStyle:{          backgroundColor:'#ba9556'        }    }}      /></Stack.Navigator>  );};

I tried re-typing the dateAndTime property as follows:

dateAndTime: {nanoseconds:number,seconds:number}

interface IGigDate {nanoseconds: number,seconds:number}interface GigObject {...dateAndTime:IGigDate...}

...but it didn't work either.

Any suggestions on how to fix this?

Here's the full code for the GigByDay.tsx component where the error is showing:

import { FC } from 'react';import { FlatList,TouchableOpacity,StyleSheet,View,Image,Text } from 'react-native'import { listProps } from '../routes/homeStack';import { GigObject } from '../routes/homeStack';type ListScreenNavigationProp = listProps['navigation']interface Props {  gigsFromSelectedDate: GigObject[],  navigation: ListScreenNavigationProp}const GigsByDay:FC<Props> = ({ gigsFromSelectedDate, navigation }):JSX.Element => (<FlatList    data={gigsFromSelectedDate}    keyExtractor={item => item.id}    renderItem={({ item }) => (<TouchableOpacity        style={styles.gigCard}        onPress={() =>          navigation.navigate('GigDetails', {            venue: item.venue,            gigName: item.gigName,            blurb: item.blurb,            isFree: item.isFree,            image: item.image,            genre: item.genre,            dateAndTime: item.dateAndTime.seconds,            tickets: item.tickets,            id:item.id          })        }><View style={styles.gigCard_items}><Image            style={styles.gigCard_items_img}            source={require('../assets/Icon_Gold_48x48.png')}          /><View><Text style={styles.gigCard_header}>{item.gigName}</Text><Text style={styles.gigCard_details}>{item.venue}</Text></View></View></TouchableOpacity>    )}  />)