React Native: Return value from Child Component to Parent while Child is receiving data from Parent

I was initially following this StackOverflow answer to obtain data from Child component but given how I had set the component up (based on another StackOverflow answer that I have since lost) i am not able to return data. Instead I receive the following error:

TypeError: data.handleCallback is not a function (it is undefined)

I'm not quite sure how to fit the solution into my set up. Any advice?

import { ChevronDownIcon, Select, SelectBackdrop, SelectContent, SelectDragIndicator, SelectDragIndicatorWrapper, SelectIcon, SelectInput, SelectItem, SelectPortal, SelectTrigger, } from '@gluestack-ui/themed'; import React from 'react'; const dict={} interface props { data: typeof dict } const SelectorComponent: React.FC<props> = ({ data }) => { const [selectedValue, setSelectedValue] = React.useState<string>(''); const _onChangeText = (itemValue: string) => { setSelectedValue(itemValue); data.handleCallback(itemValue); } return ( <Select selectedValue={selectedValue} onValueChange={(itemValue) => {_onChangeText(itemValue); console.log('Selected value:', itemValue) }} > <SelectTrigger sx={{ borderWidth: 0 }} backgroundColor="#273F4F"> <SelectInput placeholder="Select option" /> <SelectIcon className="mr-3" as={ChevronDownIcon} /> </SelectTrigger> <SelectPortal> <SelectBackdrop /> <SelectContent> <SelectDragIndicatorWrapper> <SelectDragIndicator /> </SelectDragIndicatorWrapper> {Object.entries(data).map(([key, value]) => ( <SelectItem key={key} label={key} value={value as string} /> ))} </SelectContent> </SelectPortal> </Select> ); }; export default SelectorComponent;