Retrieve data passed through .map loop

Question

I need to retrieve {latitude} and {longitude} in Map_map.js. The data is passed from MainContainer.js

const mesta = [
  {
    name: 'Praha', 
    coordinates: {
      latitude: 50.072829,
      longitude: 14.433817 
  }}

through navigator in the same file

<SecondaryStack.Screen name={screenNames.secondary} children={() => <Secondary towns={mesta}/>}/>

Which is retrieved in Primary.js and displayed in cards using map loop

<View>
  {props.towns.map(item => (
    <Text 
      style={styles.card} 
      onPress={() => navigation.navigate("Map_map", {latitude: item.coordinates.latitude}, {longitude: item.coordinates.longitude})}
    >
      {item.name}
      {item.coordinates.latitude } <--- need this
      {item.coordinates.longitude} <--- and this to be passed to Map_map.js based on which "card" i pressed
    </Text>
  ))}
</View>

and finally I need to display it here (Map_map.js) (or passed into coordinates in

<Text>
  I NEED TO OUTPUT latitude AND longitude HERE FROM PRIMARY.JS BASED ON WHICH CARD I CLICKED ON (getting variables from MainContainer.js)
  {latitude}
 </Text>

---

Full code##

MainContainer.js

import * as React from 'react';
import { useEffect } from "react";
import { NavigationContainer, StackActions, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createStackNavigator } from '@react-navigation/stack';

// Screens
import Primary from './Screens/Primary';
import Secondary from './Screens/Secondary';
import Map_map from './Screens/Map_map';

// Locations
const mesta = [
  {
    name: 'Praha', 
    coordinates: {
      latitude: 50.072829,
      longitude: 14.433817 
  }},
  , 
  {
    name: 'České Budějovice',
    coordinates: {
      latitude: 48.975250,
      longitude: 14.479161
}},
,  
  {
    name: 'Plzeň',
    coordinates: {
      latitude: 49.739296,
      longitude: 13.372455
  }},
  
  {
    name: 'Karlovy Vary', 
    coordinates: {
      latitude: 50.231656,
      longitude: 12.869226
  }},
  {
    name: 'Ústí nad Labem', 
    coordinates: {
      latitude: 50.662592,
      longitude: 14.042824
  }},
  {
    name: 'Liberec', 
    coordinates: {
      latitude: 50.764136,
      longitude: 15.047840
  }},
  {
    name: 'Hradec Králové', 
    coordinates: {
      latitude: 50.210071,
      longitude: 15.829660
  }},
  {
    name: 'Pardubice', 
    coordinates: {
      latitude: 50.032558,
      longitude: 15.773678
  }},
  {
    name: 'Jihlava', 
    coordinates: {
      latitude: 49.401642,
      longitude: 15.584001
  }},
  {
    name: 'Brno', 
    coordinates: {
      latitude: 49.190254,
      longitude: 16.614144
  }},
  {
    name: 'Olomouc', 
    coordinates: {
      latitude: 49.590450,
      longitude: 17.259280
  }},
  {
    name: 'Ostrava',
    coordinates: {
      latitude: 49.820469,
      longitude: 18.269387
  }},
  {
    name: 'Zlín',
    coordinates: {
      latitude: 49.224215,
      longitude: 17.668567
  }},
]

//Screen names
export const screenNames = {
  secondary: "Secondary", //home
  primary: "Primary",  //details
  map_map: "Map_map",  //innerDetails
  secondaryStack: "Mapa", //homeStack
  primaryStack: "Lokace",  //detailsStack
};


const SecondaryStack = createStackNavigator();

function SecondaryStackScreen() {
  return (
      <SecondaryStack.Navigator initialRouteName={screenNames.secondary} headerMode="none">
        <SecondaryStack.Screen name={screenNames.secondary} children={() => <Secondary towns={mesta}/>}/>
      </SecondaryStack.Navigator>
  );
}

const PrimaryStack = createStackNavigator();

function PrimaryStackScreen({ navigation, route }){
  const tabHiddenRoutes = ["Map_map"];
  useEffect(() => {
    if (tabHiddenRoutes.includes(getFocusedRouteNameFromRoute(route))) {
      navigation.setOptions({ tabBarVisible: false });
    } else {
      navigation.setOptions({ tabBarVisible: true });
    }
  }, [navigation, route]);

  return(
      <PrimaryStack.Navigator initialRouteName={screenNames.primary} headerMode="none">
        <PrimaryStack.Screen name={screenNames.primary} children={() => <Primary towns={mesta}/>}/>
        <PrimaryStack.Screen name={screenNames.map_map} children={() => <Map_map towns={mesta}/>}/>
      </PrimaryStack.Navigator>
  )
}


const Tab = createBottomTabNavigator();

export default function Navigation()
{
  return(
    <NavigationContainer independent>
      <Tab.Navigator
      initialRouteName={screenNames.primaryStack}
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          let rn = route.name;

          if (rn === screenNames.primaryStack) {
            iconName = focused ? 'home' : 'home-outline';

          } else if (rn === screenNames.secondaryStack) {
            iconName = focused ? 'map' : 'map-outline';
          }
          // You can return any component that you like here!
          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: '#007aff',
        inactiveTintColor: 'grey',
        labelStyle: { paddingBottom: 10, fontSize: 10 },
        style: { padding: 10, height: 70}
      }}>
        <Tab.Screen name={screenNames.primaryStack} component={PrimaryStackScreen}/>
        <Tab.Screen name={screenNames.secondaryStack} component={SecondaryStackScreen}/>
      </Tab.Navigator>
      </NavigationContainer>
  )
}

Primary.js

import * as React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';


export default function Primary(props)
{
    const navigation = useNavigation();
    return(
        <ScrollView style=
            {{ 
                flex: 1,
            }}>
            <View>
                {props.towns.map(item => (
                    <Text 
                    style={styles.card} 
                    onPress={() => navigation.navigate("Map_map", {latitude: item.coordinates.latitude}, {longitude: item.coordinates.longitude})}
                    >
                        {item.name}
                        {item.coordinates.latitude }
                        {item.coordinates.longitude}
                    </Text>
                ))}
            </View>
            </ScrollView>
    );
}

const styles = StyleSheet.create({
    card:{
        backgroundColor: "#007aff",
        borderRadius: 50,
        alignItems: 'center',
        margin: 5,
        padding: 10,
        color: 'white',
        fontWeight: 'bold'
    },
    card2:{
        backgroundColor: "#FF3300",
        borderRadius: 50,
        alignItems: 'center',
        margin: 5,
        padding: 10,
        color: 'white',
        fontWeight: 'bold'
    },
  });

Map_map.js

import * as React from 'react';
import { StyleSheet, View, Text, Image, Button } from 'react-native';
import MapView, {PROVIDER_GOOGLE, Marker} from 'react-native-maps';
import { useNavigation } from '@react-navigation/native';

export default function Map_map({ navigation }) {
  const {goBack} = navigation.navigate("Primary");  
  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Button onPress={() => goBack('Primary')} title="Go back from ProfileScreen" />
            <MapView
                style={styles.map}
                provider={PROVIDER_GOOGLE}
                //specify our coordinates.
                initialRegion=
                {{
                latitude: 49.061880,
                longitude: 17.349916,
                latitudeDelta: 0.002,
                longitudeDelta: 0.002,
                }}
            >
                <Marker
                  // coordinate={navigation.getParam(kordz)}
                  // latitude: 49.061880,
                  // longitude: 17.349916,
                    
                />
            </MapView>
          <Text>
            I NEED TO OUTPUT latitude AND longitude HERE FROM PRIMARY.JS BASED ON WHICH CARD I CLICKED ON (getting variables from MainContainer.js)
           {/* {latitude} */}
          </Text>
        </View>
    );
}

const styles = StyleSheet.create({
    map: {
      height: '40%',
      width: '100%'
    },
  });