React Native Navigation Prop Not passing parameters correctly

In my React Native application, I have the following routes in my app.js set up:

export default class App extends Component {  render() {    return (<NavigationContainer><Stack.Navigator initialRouteName="Home"><Stack.Screen          name="Home"          component={ItemListing}          /><Stack.Screen          name="Details"          component={ItemImageDetails}          /></Stack.Navigator></NavigationContainer>    )  }}

I have a ItemListing component that has multiple ItemImage components that on press should navigate to the Details page which is the ItemImageDetails component by passing in a unique id. These are written in Typescript.

The ItemListing passes the navigation prop to the ItemImage as such:

import { NavigationScreenProp } from 'react-navigation'...interface ItemListingProps {  navigation: NavigationScreenProp<any,any>}export default class ItemListing extends Component<ItemListingProps,ItemListingState> {  constructor (props: ItemListingProps) {    super(props)    this.state = {      results: [],      searchTerm: ""    }  }  ...  render() {    return (<><View>              {this.state.results.map((result,index) =><ItemImage                  navigation={this.props.navigation}                  imageMetadata={result.data[0]}                  imageUrl={result.links[0].href}                  key={index}                />              )}</View></>    )  }}

The ItemImage is written as:

import { NavigationScreenProp } from 'react-navigation'...interface ItemImageProps {  navigation: NavigationScreenProp<any,any>  imageMetadata: ImageMetadata  imageUrl: string}export default class ItemImage extends Component<ItemImageProps,{}> {  constructor (props: ItemImageProps) {    super(props)  }  render() {    return (<><TouchableOpacity          onPress={() =>             this.props.navigation.navigate('Details', {               id: this.props.imageMetadata.id            })          }></TouchableOpacity></>    )  }}

The ItemImageDetails component is as below:

interface ItemImageDetailsProps {  id: string}export default class ItemImageDetails extends Component<ItemImageDetailsProps, {}> {  constructor (props: ItemImageDetailsProps) {    super(props)  }  ...  render() {    return (<><Text>THIS IS THE DETAILS PAGE</Text><Text>{this.props.id}</Text>      ...</>    )  }}

However, the id in the props of the ItemImageDetails is shown as 'undefined' in a console.log. There are no errors and the project builds correctly. The Details page is successfully navigated to and the id is correct in the ItemImage component, it just seems to be passing incorrectly within the navigation prop