Arrow function passed as prop in React-Native is undefined in component it is passed to

I have a container component:

import React, {FC, FormEvent, useState} from 'react';// utilsimport api from '../../api';import {useAppSelector} from '../../store/hooks';import CreateGroupPresentation from './CreateGroupPresentation';interface Iprops {  close: () => void;}interface IformState {  title: string;  upcs: string;}export interface IhandleChangeArgs {  currentTarget: { value: string, id: string };}const CreateGroup: FC<Iprops> = ({close}) => {  // get auth from redux  const {token} = useAppSelector(state => state.auth);  // local state for form  const initialState: IformState = {title: '', upcs: ''};  const [formState, setFormState] = useState(initialState);  const {title, upcs} = formState;  // handle change and submit for form  const handleChange = (event: IhandleChangeArgs) => {    const {id, value} = event.currentTarget;    // prevents non-digits from being entered into the upc input    if (id === 'upcs') {      const numbers = /[\d\s]*/;      const total = value.split('');      const newChar = total[total.length - 1];      if (!numbers.test(newChar)) return;    }    setFormState({...formState, [id]: value});  };  const handleSubmit = async (event: FormEvent) => {    event.preventDefault();    // converts the string from the upcs textarea to an array of numbers to send to the api    const upcsToNumberArray: number[] = [];    upcs      .trim()      .split('\n')      .forEach(upc => upcsToNumberArray.push(parseInt(upc)));    // eliminates duplicate UPCs    const noDupes = [...new Set(upcsToNumberArray)];    // send to api    try {      if (token) {        const response = await api.createGroup(token, {          title,          upcs: noDupes,        });        console.log(response);      }    } catch (error: any) {      console.log(error);    }  };  const presentationProps = {handleSubmit, handleChange, title, upcs, close};  return <CreateGroupPresentation {...presentationProps} />;};export default CreateGroup;

...which passes several props to a presentational component as presentationProps:

import {Modal, View} from 'react-native';import React, {FC, FormEvent} from 'react';import styles from './CreateGroup.scss';import MyButton from '../shared/MyButton/MyButton';import LabelInput from '../shared/LabelInput/LabelInput';import {IhandleChangeArgs} from './CreateGroup';interface Iprops {  handleSubmit: (event: FormEvent) => Promise<void>;  handleChange: (event: IhandleChangeArgs) => void;  title: string;  upcs: string;  close: () => void;}const CreateGroup: FC<Iprops> = ({handleChange, title, upcs, close}) => {  return (<Modal animationType="slide" transparent><View style={styles['modal-back']}><View style={styles['modal-fore']}><LabelInput            label="Title"            value={title}            onChangeText={text =>              handleChange({                currentTarget: {                  value: text.valueOf().toString(),                  id: 'title',                },              })            }          /><LabelInput            label="UPCs"            value={upcs}            multiline            numberOfLines={12}            onChangeText={text =>              handleChange({                currentTarget: {value: text.valueOf().toString(), id: 'upcs'},              })            }          /><MyButton onPress={close} text="close" /></View></View></Modal>  );};export default CreateGroup;

...but I get a render error message that handleChange is not a function and is in fact undefined. How can I pass the function correctly? Is there a way that I can pass it without changing the function body itself? I am trying to keep the container component the same in the react-native version of my app as it is in the web version.

note: the handleSubmit function is not currently used in the presentational component, but I will handle that next.