How do you get 1 specific value from a prop in expo? – React native

I’ve been trying to pass up this prop from CameraButton.js file that gives the UI of an image that was taken but whenever I activate the prop in the AddPost.js, it gives me all the values but when I try to get the singular value of the image like using console.log(props.route.params.image) and gives error undefined is not an object
enter image description here
but it works perfectly when export default function console.log(props.route.params) and shows
enter image description here

AddPost.JS

import { useNavigation } from "@react-navigation/core";
import React from 'react'
import {useState} from "react";
import { View, TextInput, Button } from 'react-native'

export default function AddPost(props) {
    console.log(props);
    const navigation = useNavigation();
    const [caption, setCaption] = useState("")
    const uploadImage = async () => {
        const response = await fetch(uri)
    }
    return (
      <View style={{flex: 1}}>
        <TextInput
            placeholder="Whats on your mind Edgers navars"
            onChangeText={(caption) => setCaption(caption)}
            />
            <Button title = "Take A Photo" onPress={() =>     navigation.navigate("CameraButton")}
              />
            <Button title = "Save" onPress={() => uploadImage()}
              />
      </View>

    )
}

CameraButton.Js

import { Camera, CameraType } from 'expo-camera';
import { useNavigation } from "@react-navigation/core";
import { useState } from 'react';
import { Button, StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function App() {
    const navigation = useNavigation();
    const [type, setType] = useState(Camera.Constants.Type.back)
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const [image, setImage] = useState(null);
  const [camera, setCamera] = useState(null);

  const takePicture = async () => {
    if(camera){
        const data = await camera.takePictureAsync(null);
        setImage(data.uri);
    }
  }


  if (!permission) {
    // Camera permissions are still loading
    return <View />;
  }

  if (!permission.granted) {
    // Camera permissions are not granted yet
    return (
      <View style={styles.container}>
        <Text style={{ textAlign: 'center' }}>
          We need your permission to show the camera
        </Text>
        <Button onPress={requestPermission} title="grant permission" />
      </View>
    );
      }

  function toggleCameraType() {
    setType((current) => (
      current === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back
    ));
      }

    // No permissions request is necessary for launching the image library
    let openImagePickerAsync = async () => {
        let permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

        if (permissionResult.granted === false) {
          alert("Permission to access camera roll is required!");
          return;
        }
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
          });
  
      
  
          if (!result.cancelled) {
            setImage(result.uri);
          }
    
      }

  return (
    <View style={styles.container}>
      <Camera ref={ref => setCamera(ref)} style={styles.camera} type={type}>
        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={toggleCameraType}>
            <Text style={styles.text}>Flip Camera</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => takePicture()}>
            <Text style={styles.text}>Take Picture</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={openImagePickerAsync}>
            <Text style={styles.text}>Choose Picture</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.button}
            onPress={() => navigation.navigate('AddPost', {image})}>
            <Text style={styles.text}>Save Picture</Text>
          </TouchableOpacity>
        </View>
      </Camera>
      {image &&<Image source={{uri: image}}style={styles.camera}/>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  camera: {
    flex: 1,
  },
  buttonContainer: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'transparent',
    margin: 64,
  },
  button: {
    flex: 1,
    alignSelf: 'flex-end',
    alignItems: 'center',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'white',
  },                                              
});