Как передать состояние от дочернего к родительскому в функциональном компоненте React Native?

Я создал компонент выбора, чтобы получать данные из API и отображать их (ProductNames) в списке выбора, чтобы выбрать один из них. Затем я могу получить значение элемента средства выбора в виде идентификатора продукта. После этого я использую этот дочерний компонент в родительском компоненте, который указывает форму для отправки. Теперь я вижу средство выбора в родительском компоненте (форме) и могу выбрать один из них.

Моя основная цель - открыть поле ввода через сборщик. Итак, теперь мне нужно передать item.value (как состояние selectedValue) родительскому компоненту для отправки. Как я могу передать это дочернее состояние родительскому состоянию?

это мой дочерний компонент:

import React, {useEffect, useState} from 'react';
import {View, StyleSheet} from 'react-native';
import {Picker} from '@react-native-picker/picker';
import AsyncStorage from '@react-native-community/async-storage';


const ProductPicker = () => {
    const [selectedValue, setSelectedValue] = useState('');
    const [productDetails, setproductDetails] = useState([]);
console.info('selected value', selectedValue);
    useEffect(() => {
        getProductList();
    }, []);

    const getProductList = async () => {
        const token = await AsyncStorage.getItem('userToken');
        

        fetch('http://10.0.2.2:3000/customer/get-all-products', {

            method: 'post',
            headers: {
                'Content-Type': 'application/json',
                'Authentication': `Bearer ${token}`,
            },
        })
            .then((response) => response.json())
            .then((json) => setproductDetails(json.data))
            .catch((error) => console.error(error));

    };

    return (
        <View style = {styles.container}>
            <Picker
                selectedValue = {selectedValue}
                style = {{height: 40, width: 150}}
                onValueChange = {(itemValue, itemIndex) => {
                    setSelectedValue(itemValue);
                }}
            >

     

                {productDetails.map((item, index) => {
                    return (
                        <Picker.Item label = {item.productName} value = {item.productID} key = {index}/>);
                })}

            </Picker>

        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 40,
        alignItems: 'center',
    },
});

export default ProductPicker;

а это мой родительский компонент:

import * as React from 'react';
import {Button, View, Text, ScrollView, StyleSheet, Alert} from 'react-native';
import {Appbar} from 'react-native-paper';
import {TextInput, HelperText} from 'react-native-paper';
import {useEffect, useState} from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import ProductPicker from './ProductPicker';


const ComplaintSubmission = ({navigation}) => {

    const [productID , setproductID] = useState('');
    const [description , setdescription] = useState('');
    const [token, setToken] = useState('');
    


    const saveToken = async () => {
        const token = await AsyncStorage.getItem('userToken');
        console.info('token from storage', token);
        setToken(token);
    }

    useEffect(() => {
        saveToken();
        fetch("http://10.0.2.2:3000/customer/lodge-complaint", {

            method: "post",
            headers: {
                'Content-Type': 'application/json',
                'Authentication': `Bearer ${token}`
            },
            body: JSON.stringify({

                description : description,
            })

        })

    }, []);


    const openAlert = () => {
        Alert.alert(
            "Complaint Successfully Submitted",
            "We review it as soon as possible. Thank you for reaching for us!",
            [{
                text: "OK",
                onPress : () => navigation.navigate("DashboardDrawer" ),

            }]


        );
    }

  return (
    <ScrollView>
      <Appbar.Header>
        <Appbar.BackAction onPress = {() => navigation.goBack()} />
        <Appbar.Content title = "Submit Complaint" />
        <Appbar.Action icon = "magnify" onPress = {() => navigation.openDrawer()} />
      </Appbar.Header>
      <Text>Plese Fill the following</Text>
      <View>
         

       <ProductPicker />

        <HelperText type = "info">
          Make sure select the correct Product
        </HelperText>
      </View>

      <TextInput
        style = {styles.PIDstyle}
        label = "Description"
        onChangeText = {(description) => setdescription(description)}
      />
      <View style = {{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>This is submittion</Text>
        <Button onPress = {() => openAlert()} title = "Submit Complaint" />
      </View>
    </ScrollView>
  );
};
export default ComplaintSubmission;
const styles = StyleSheet.create({
  PIDstyle: {
    marginTop: 30,
    marginLeft: 10,
    marginRight: 10,
  },
});