React Native Props Not Working as Expected

Question

In react native I am trying to pass props down to a child through the stack navigator. I am using a const object that I set up that I want to pass down. However, when I read it in the child, it says it is undefined.

Parent:

`//import modules
import { createStackNavigator } from "@react-navigation/stack";
import React, {useState} from 'react';
import 'react-native-gesture-handler';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

//import local
import DeviceList from '../screens/DeviceDetails';
import DeviceDetails from '../screens/DeviceDetails';
import Questionnaire from '../screens/Questionnaire';
import Testing from '../screens/Testing';
import Home from "../screens/Home";
import {gstyles} from '../global/gstyles';

//create stack nav
const Stack = createStackNavigator();

const MyStack = () => {

    const [devPrm, setDevPrm]= useState({
        allDevs: [],
        devScan: null,
        connectedDev: null, 
        devBattery: 0,
        FIRST_UUID : "34E16BFA-B791-11ED-AFA1-0242AC120002",
        FIRST_CHARACTERISTIC : "34E10005-B791-11ED-AFA1-0242AC120002"
    })

    return(
        <GestureHandlerRootView style={{ flex: 1 }}>
        <Stack.Navigator screenOptions={{
            headerStatusBarHeight: 0,
            headerTitleAlign: 'center',
            headerTintColor : '#ffa64d',
            headerStyle:{
                backgroundColor:'black',
            },
            headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 30,
                color: '#ffffff'
            },
            }}>

            <Stack.Screen name = "Home" component={Home} devPrm={devPrm} setDevPrm={setDevPrm}/>
            <Stack.Screen name = "DeviceDetails" component={DeviceDetails} />
            <Stack.Screen name = "Questionnaire" component={Questionnaire} />
            <Stack.Screen name = "Testing" component={Testing} />

        </Stack.Navigator>
        </GestureHandlerRootView>

    )
}

export default MyStack`

Child:

`import React, { useCallback } from 'react';
import { useState, useEffect, useMemo, useContext } from 'react';
import { View, Text, TouchableOpacity, SafeAreaView, Button, FlatList, Platform,  } from 'react-native';
import { BleManager  } from "react-native-ble-plx";
import * as ExpoDevice from "expo-device";
import { PermissionsAndroid } from 'react-native';
import base64 from 'react-native-base64';
import { useRoute } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import { Buffer } from 'buffer';
import 'react-native-gesture-handler';

//import locals
import {gstyles} from '../global/gstyles';
import {useBLE} from '../components/BluetoothFunctions';

const Home = ( {devPrm, setDevPrm}) => {

    //set navigation and routes 
    const navigation = useNavigation()
    const route = useRoute();

    //get consts and functions
    const {connectToDevice, scanForDevices} = useBLE({devPrm, setDevPrm})

    console.log('dev param',JSON.stringify(devPrm))
    console.log('dev param connected',JSON.stringify(devPrm.connectedDev))

    const connectAndGo = (item) => {
        connectToDevice(item, setDevPrm, devPrm)
        navigation.navigate("DeviceDetails",{})
    }



  return (
        <View style={gstyles.containerView}>
            <View><Text style={gstyles.titleText}>Tap on a device to connect</Text></View>
            <View style={gstyles.largeView}>
                <Text style={gstyles.normText}>{JSON.stringify(devPrm)}</Text>
            </View>
        </View>
    );  
}

export default Home`

I have tried moving the location of the constant or passing the props in a different way, but with no success.