React Native: how to combine component props and the navigation prop in Typescript?

I have a screen with Items on it that's rendered in a flatlist. If I "onLongPress" on an item's text/title, I should navigate to a Details page with title, etc filled in. If I press the "+" button on the screen with all the Items, it should go to the Details page but with empty fields (to be able to create a new one). I'll show some code now.

Here's part of my screen that renders the items:

...type RootStackParamList = {    ListDetails: { listName: string };    Item: { listName: string, itemInfo: any };    ItemDetails: { listName: string, itemInfo: any };  };type ListDetailsScreenRouteProp = RouteProp<RootStackParamList, 'ListDetails'>;type ListDetailsScreenNavigationProp = StackNavigationProp<RootStackParamList, 'ListDetails'>;type Props = {    route: ListDetailsScreenRouteProp;    navigation: ListDetailsScreenNavigationProp  };export default function DetailsScreen({ route, navigation }: Props) {    const { listName } = route.params;...const renderItem = (item: any) => (<ItemScreen listName={listName} itemInfo={item} />    )    return (<View style={styles.container}><Text style={styles.header}>{listName}</Text>          {data.length > 0 ? (<FlatList                style={styles.flatlist}                data={data}                renderItem={({ item }: any) => renderItem(item)}            />          ) : (<Text style={styles.noItems}>There are no items here yet!</Text>          )}<FloatingActionButton onPress={() => navigation.navigate('ItemDetails', { listName: listName, itemInfo: null })} /></View>  

It will show a title/header, flatlist and then the FAB, that will navigate to 'ItemDetails' but without the itemInfo, so that the fields can be empty. Here i have to pass 2 props to 'ItemScreen'. The FAB navigate action WORKS, because in 'ItemDetails' I can access the data via 'route.params'.

What DOESN'T work, is the following in 'ItemScreen':

... type RootStackParamList = {    Item: { listName: string, itemInfo: any };    ItemDetails: { listName: string, itemInfo: any };  };type ItemScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Item'>;type Props = {    navigation: ItemScreenNavigationProp,  };export default function ItemScreen({ listName, itemInfo}: any, { navigation }: Props) {...const onLongPress = () => {        navigation.navigate('ItemDetails', {            listName: listName,            itemInfo: itemInfo,        });    }...  

There's something wrong I believe in my destructered props/params in 'ItemScreen'. Since I'm using typescript, I also have to add '{ navigation }: Props' to the parameter list, and also my 2 params I want to send from my previous screen 'listName' and 'itemInfo'.

Code builds and shows no errors in this case, but when trying to use 'onLongPress', it will say 'navigation is undefined'.

I've tried putting my 2 params in the 'Props' object, but then in my previous screen he complains that '' needs a 'navigation' parameter/prop. But I don't want to pass that one, I want to use the implicit one from code, how it's done normally on all my other screens?

Does anyone know how to properly use ItemScreen params AND navigation so that navigation isn't undefined, without having to pass 'navigation' when renderen 'ItemScreen' components? Also it can't be route params I THINK, because they aren't passed by route but with parameter/props when rendereing the component via '<ItemScreen ... />'