What type should be assigned to the first argument of navigate?

I'm building an app with React Native, and am converting it to TypeScript.

I have a component GigsByWeek, where a user can tap on a button and navigate to the GigDetails screen.

In the process of converting GigsByWeek to TypeScript, I've hit an error with the following piece of code:

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

Error

Argument of type '["GigDetails", { venue: any; gigName: any; blurb: any; isFree: any; image: any; genre: any; dateAndTime: any; tickets: any; }]' is not assignable to parameter of type '[screen: "GigDetails"] | [screen: "GigDetails", params: undefined]'.Type '["GigDetails", { venue: any; gigName: any; blurb: any; isFree: any; image: any; genre: any; dateAndTime: any; tickets: any; }]' is not assignable to type '[screen: "GigDetails", params: undefined]'.Type at position 1 in source is not compatible with type at position 1 in target.Type '{ venue: any; gigName: any; blurb: any; isFree: any; image: any; genre: any; dateAndTime: any; tickets: any; }' is not assignable to type 'undefined'.ts(2345)

I tried solving this the following code, but it didn't help:

const screen = 'GigDetails'type ScreenNames = 'GigDetails' | 'Map' | 'List'navigation.navigate('screen:ScreenNames', {......

I read the React Native documentation for how to type this particular argument, but I'm new to TypeScript and it left me confused. Any suggestions?

Here's the full code:

GigsByDay.tsx

import { FC } from 'react'import { ScrollView,TouchableOpacity,StyleSheet,View,Image,Text } from 'react-native'import { listProps } from '../routes/homeStack'interface GigObject {      name:string,      id:string,      location:[],      tickets:string,      venue:string,      dateAndTime:string,      isFree:boolean,      image:string,      genre: string}type ListScreenNavigationProp = listProps['navigation']interface Props {  gigsThisWeek_grouped: GigObject[],  navigation: ListScreenNavigationProp}const GigsByWeek:FC<Props> = ({ gigsThisWeek_grouped, navigation }): JSX.Element => (<View style={{ flexGrow: 1, height: 600 }}><ScrollView>      {Object.keys(gigsThisWeek_grouped).map((item, i) => {        return (<><Text key={i} style={styles.date}>              {item}</Text>            {gigsThisWeek_grouped[item].map((val, i) => (<TouchableOpacity                style={styles.gigCard}                key={i}                onPress={() =>                  navigation.navigate('GigDetails', {                    venue: val.venue,                    gigName: val.gigName,                    blurb: val.blurb,                    isFree: val.isFree,                    image: val.image,                    genre: val.genre,                    dateAndTime: val.dateAndTime.seconds,                    tickets: val.tickets,                  })                }><View style={styles.gigCard_items}><Image                    style={styles.gigCard_items_img}                    source={require('../assets/Icon_Gold_48x48.png')}                  /><View><Text style={styles.gigCard_header}>{val.gigName}</Text><Text style={styles.gigCard_details}>{val.venue}</Text></View></View></TouchableOpacity>            ))}</>        )      })}</ScrollView></View>)

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";type RootStackParamList = {  Map:undefined,  List:undefined,  GigDetails:undefined}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>  );};