pass data between screens with react-navigation getParamas

I'm rendering a few items in my map in ContactListand upon clicking on the thumbnail, I want to navigate to a new screen UserDetailsScreen such that the data about the clicked item is also passed along.

Previously I was using modals, but now I trying to switch to react-navigation.

ContactList.tsx:

export const ContactList: React.FunctionComponent<UserProps> = ({  data,  onDeleteContact,}) => {  const [isUserVisible, setIsUserVisible] = useState(false);  //const [visibleUser, setVisibleUser] = useState<any>();  const navigation = useNavigation();  return (<View style={styles.users}>      {data.users.nodes[0].userRelations.map(        (item: { relatedUser: RelatedUser; id: number }) => {          const numberOfFriends = item.relatedUser.userRelations.length;          const numberPlate = 'WHV AB 123';          return (<View style={styles.item} key={item.id}>              {/* <TouchableOpacity onPress={() => setIsUserVisible(true)}> */}<TouchableOpacity                onPress={() =>                  navigation.navigate('UserDetailsScreen', {                    firstName: item.relatedUser.firstName,                    rating: item.relatedUser.rating,                    numberOfFriends: numberOfFriends,                    onDeleteContact: onDeleteContact,                    isUserVisible: isUserVisible,                    setIsUserVisible: setIsUserVisible,                    numberPlate: numberPlate,                    navigation: navigation,                  })                }><Thumbnail                  }}></Thumbnail></TouchableOpacity><View style={styles.nameNumber}><Text style={styles.userName}>{userName}</Text></View>              {/* <UserDetails                firstName={item.relatedUser.firstName}                rating={item.relatedUser.rating}                numberOfFriends={numberOfFriends}                onDeleteContact={onDeleteContact}                isUserVisible={isUserVisible}                setIsUserVisible={setIsUserVisible}                  numberPlate={numberPlate}></UserDetails> */}</View>          );        },      )}</View>  );};

UserDetailsScreen:

export const UserDetailsScreen: React.FunctionComponent<UserProps> = ({  firstName,  rating,  numberOfFriends,  numberPlate,  onDeleteContact,  navigation,//   isUserVisible,//   setIsUserVisible,}) => {//const navigation = useNavigation();const fName = navigation.getParam('firstName')  return (    // <Modal visible={isUserVisible}><View style={styles.container}><View><TouchableOpacity            style={styles.cross}            //onPress={() => setIsUserVisible(false)}>              onPress={() => navigation.navigate('Whitelist')}><Thumbnail></Thumbnail></TouchableOpacity></View><View style={styles.searchLocationContainer}><UserInfoContainer            firstName={firstName}            rating={rating}            numberPlate={numberPlate}            numberOfFriends={numberOfFriends}></UserInfoContainer></View></View>    // </Modal>  );};

Similarly, when I click on the thumbnail on this screen, I want to go back to my previous page where I can click on another object.

However, I keep getting an error that navigation.getParam is undefined. How can I fix this?