Props not passed to Child component on onPress event

I googled and followed the solution to how to pass props to Child component but failed. I know navigation.navigate can pass the result of ImagePick without using props but I want to pass it using props instead. ListofItems should read props passed from Parent component and return the data back depending on the value of props received. However, the problem is ListofItems does not even run when props are passed. Thanks for help in advance.

Parent component

import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import ListOfItems from './UserPage/ListOfItems';
import { ImageBackground, StyleSheet, Text, View, Platform, TouchableOpacity, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as ImagePicker from 'expo-image-picker';

const Stack = createStackNavigator();

function Homes({ navigation, route, props }) {
  var personalColor;
  const [season,setSeason] = useState('');
  
  const receivedVal=(val)=>{
    setSeason({val})
    console.log(val);
    console.log(season);
  }

  const ImagePick = async () => {
      let result="";
      try {
      result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });
      console.log(result);
      if (!result.cancelled) {
        // navigation.navigate('ItemList',{image:result, received: receivedVal})    
           return result;
      }
    }
    catch (error) {
      console.log(error);
    };
    console.log(result);
  }

  return (
    <View style={styles.title_container}>
      <ImageBackground source={require("./assets/pages/img.png")} style={styles.image}>
        <View style={styles.button_container} activeOpacity={0.3}>
          <TouchableOpacity
            onPress={() => {    
              const res=ImagePick();
              <ListOfItems image={res} received={receivedVal('')}/>   
            }}
            style={styles.button}>
            <Text style={styles.text}>Upload</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    </View>
  );
}


function Home() {
  return (
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator initialRouteName="HomeSite">
        <Stack.Screen options={{ headerShown: false }} name="HomeSite" component={Homes} />
        <Stack.Screen options={{ headerShown: false }} name="ItemList" component={ListOfItems} />
      </Stack.Navigator>
     </NavigationContainer>
  );
}

ReactDOM.render(<Home/>, document.getElementById('root'));
export default Home;

Child component does not show up on the console. console.log("test") does not even run.

import React, { useState} from 'react';
import ReactDOM from 'react-dom';
// import { NavigationContainer } from '@react-navigation/native';

function ListofItems({ navigation,props}) {
    console.log("test");
    const{image}=props.image;
    const{received}=props.received;
    console.log('image',image);
}
export default ListofItems;