react native で遷移先にparameterを渡したのですが正しく取得ができません

実現したいこと

・paramsの内容を取得できるようにしたい

前提

react native map を　使用して　マップアプリを作成しております。
登録ボタンを押したときにピンを立てる機能を追加しようとしています。

Page2のパラメータ(makersSend：markers)を登録ボタンでnavigationしMapscreenで使おうと考えています。

markerの内容は、緯度と経度になります。

発生している問題・エラーメッセージ

TypeError: Cannot read property 'params' of undefined

該当のソースコード

JavaScript,Page2
1import React, { useState } from 'react';
2import { View, StyleSheet, Image } from 'react-native';
3import { TextInput, Button, IconButton, Card } from 'react-native-paper';
4import * as ImagePicker from 'expo-image-picker';
5// import { Camera } from 'expo-camera';
6import { Modal, Portal,  PaperProvider } from 'react-native-paper';
7
8
9export default function Page2({ navigation,route}) {
10  const [name, setName] = useState('');
11  const [address, setAddress] = useState('');
12  const [time, setTime] = useState('');
13  const [photo, setPhoto] = useState(null);
14  const [cameraPermission, setCameraPermission] = useState(null);
15  const Name ='bbb';
16  const markers = route.params;
17  console.log(markers);
18  //const cameraRef = React.useRef(null);
19
20  React.useEffect(() => {
21    (async () => {
22      const { status } = await ImagePicker.requestCameraPermissionsAsync();
23      setCameraPermission(status === 'granted');
24    })();
25  }, []);
26
27  const [visible, setVisible] = React.useState(false);
28
29  const showModal = () => setVisible(true);
30  const hideModal = () => setVisible(false);
31  const containerStyle = { 
32        backgroundColor: 'rgba(255, 255, 255, 0.9)',
33        padding: 20,
34        borderRadius: 10,
35        alignItems: 'center',
36        justifyContent: 'center',
37      };
38
39  const handleTakePhoto = async () => {
40    const result = await ImagePicker.launchCameraAsync({
41      mediaTypes: ImagePicker.MediaTypeOptions.Images,
42      allowsEditing: true,
43      aspect: [1, 1],
44      quality: 1,
45    });
46
47    if (!result.cancelled) {
48      setPhoto(result.uri);
49    }
50  };
51
52  const handleChoosePhoto = async () => {
53    const result = await ImagePicker.launchImageLibraryAsync({
54      mediaTypes: ImagePicker.MediaTypeOptions.Images,
55      allowsEditing: true,
56      aspect: [1, 1],
57      quality: 1,
58    });
59
60    if (!result.cancelled) {
61      setPhoto(result.uri);
62    }
63  };
64
65  const handleRegistration = () => {
66    // 登録処理を実行する
67    console.log('Registration:', name, address, time, photo);
68  };
69
70  return (
71    <PaperProvider>
72    <View style={styles.container}>
73        <Portal>
74        <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={containerStyle}>
75          <Button mode="contained" onPress={handleTakePhoto} style={styles.button}>
76            写真を撮影
77          </Button>
78          <Button mode="contained" onPress={handleChoosePhoto} style={styles.button}>
79            写真を選択
80          </Button>
81        </Modal>
82        </Portal>
83
84      <TextInput
85        label="採れる昆虫"
86        value={name}
87        onChangeText={(text) => setName(text)}
88        style={styles.input}
89      />
90      <TextInput
91        label="住所"
92        value={address}
93        onChangeText={(text) => setAddress(text)}
94        style={styles.input}
95      />
96      <TextInput
97        label="採取時間"
98        value={time}
99        onChangeText={(text) => setTime(text)}
100        style={styles.input}
101      />
102      <Card>
103       {photo && <Image source={{ uri: photo }} style={styles.photo} />}
104       </Card>
105       {/* <TextInput
106          label="写真"
107          value={photo}
108          onChangeText={(text) => setPhoto(text)}
109          style={styles.input}
110        /> */}
111      <View style={styles.cameraContainer}>
112        <IconButton
113          icon="camera"
114          size={30}
115          onPress={showModal}
116          style={styles.cameraButton}
117          disabled={!cameraPermission}
118        />
119      <Button mode="contained" onPress={() => navigation.navigate('MapScreen', { markersSend: markers})} style={styles.button}>
120        登録
121      </Button>
122
123      </View>
124    </View>
125    </PaperProvider>
126  );
127};
128
129const styles = StyleSheet.create({
130  container: {
131    flex: 1,
132    padding: 16,
133    justifyContent: 'center',
134  },
135  cameraContainer: {
136    alignItems: 'center',
137    marginBottom: 16,
138    marginTop:15
139  },
140  camera: {
141    width: 200,
142    height: 200,
143    marginBottom: 16,
144  },
145  cameraButton: {
146    position: 'absolute',
147    bottom: 16,
148    marginBottom:20
149  },
150  photo: {
151    width: 100,
152    height: 100,
153    marginTop:16,
154    marginBottom: 16,
155    alignSelf: 'center',
156  },
157  input: {
158    marginBottom: 16,
159  },
160  button: {
161    marginTop: 20,
162  },
163  modal:{
164   flex:0.4,
165  }
166});

JavaScript,MapScreen
1import React, { useState, useEffect } from 'react';
2import {
3  StyleSheet,
4  Text,
5  View,
6  Platform,
7  TouchableOpacity,
8  Image,
9} from 'react-native';
10import { StatusBar } from 'expo-status-bar';
11import * as Location from 'expo-location';
12import * as Permissions from 'expo-permissions';
13import MapView, { Marker } from 'react-native-maps';
14import Footer from './Footer';
15
16const STATUS_BAR_HEIGHT = Platform.OS == 'ios' ? 20 : StatusBar.currentHeight;
17
18// Map.js
19
20export default function MapScreen({route}) {
21  const [latitude, setLatitude] = useState(null);
22  const [longitude, setLongitude] = useState(null);
23  const [message, setMessage] = useState('位置情報取得中');
24  const markersSend = route.params;
25  console.log('markersSend:', markersSend);
26
27
28
29  const getLocationAsync = async () => {
30    console.log('現在位置取得中');
31    const { status } = await Permissions.askAsync(Permissions.LOCATION);
32    if (status !== 'granted') {
33      setMessage('位置情報のパーミッションの取得に失敗しました。');
34      return;
35    }
36    const location = await Location.getCurrentPositionAsync({});
37    let longitude = '経度:' + JSON.stringify(location.coords.longitude);
38    let latitude = '緯度:' + JSON.stringify(location.coords.latitude);
39    console.log(longitude);
40    console.log(latitude);
41    setLatitude(location.coords.latitude);
42    setLongitude(location.coords.longitude);
43  };
44
45  useEffect(() => {
46    getLocationAsync();
47  }, []);
48
49  const handleReload = () => {
50    getLocationAsync();
51  };
52
53  if (latitude && longitude) {
54    return (
55      <View style={styles.container}>
56        <MapView
57          style={{ flex: 1 }}
58          initialRegion={{
59            latitude: latitude,
60            longitude: longitude,
61            latitudeDelta: 0.002,
62            longitudeDelta: 0.002,
63          }}
64          region={{
65            latitude: latitude,
66            longitude: longitude,
67            latitudeDelta: 0.002,
68            longitudeDelta: 0.002,
69          }}
70          showsUserLocation={true}
71        >
72        </MapView>
73        <Footer handleReload={handleReload} />
74      </View>
75    );
76  }
77  
78  return (
79    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
80      <Image source={require('../../assets/wood_kabutomushi_11494.png')} />
81      <Text>{message}</Text>
82    </View>
83  );
84}  
85const styles = StyleSheet.create({
86    container: {
87      paddingTop: STATUS_BAR_HEIGHT,
88      flex: 1,
89      backgroundColor: '#fff',
90      justifyContent: 'center',
91    },
92  });
93
94
95

試したこと

MapScreenでmarkerSend = routeでじっこうしたところログが下記のように表示されたので、route.paramsができると思ったのですができませんでした。

consolele.log(markersSend)
1markersSend: {"key": "MapScreen-ErGaPiEKRixJ4LIzY_oGg", "name": "MapScreen", "params": {"markersSend": {"markers": [Array]}}, "path": undefined}
2
3

ここに問題に対して試したことを記載してください。