unable to pass navigation props b/w screens with react-navigation

In my component ContactList, I have rendered sone items using a map. Each item contains a thumbnail. When I click on the thumbnail, I want to navigate to a new screen called UserDetailsScreen. While I navigate, I also want to transfer data to the next screen about the particular user whose thumbnail was clicked on.

Modals don't work properly since multiple modals will open if I used it in a map. So I am trying to use 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:

type UserProps = {  //data: UsersQueryHookResult,  firstName: string;  rating: number;  numberOfFriends: number;  numberPlate: string;  onDeleteContact: (id: number) => void;  navigation: any;};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>  );};

Additionally, when I click on the thumbnail from this screen, I should go back to my previous screen such that I can click on another object now.

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

I believe I need to pass the route props but I'm not sure how to use them and whether I should pass them in both screens or one