I have a list of survey questions as components for a user to fill out and am trying to go through each one and update the parent components state when the child components input field is filled out, however on the first component I keep on receiving the text from the TextInput as undefined.

This is my Parent component 'SurveyScreen':

export default function SurveyScreen({navigation, route}) {
  const [childNameValue, setChildNameValue] = useState('');

function handleChange(newValue) {
    setChildNameValue(newValue);
    console.log(childNameValue);
  }

return (
<ScrollView style={styles.cardContainer}>
        <View>
          <Text style={styles.title}>Please fill out all questions below</Text>
        </View>
        <View>

          <BasicTextInput
            title="Child's full name"
            value={childNameValue}
            onChange={handleChange}
          />
       );
}

And my Child component 'BasicTextInput':

import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Pressable,
  Platform,
  TextInput,
} from 'react-native';
import CheckBox from '@react-native-community/checkbox';

export default function BasicTextInput({title, onChange}, props) {
  const [text, onChangeText] = useState('');

  function handleChange(e) {
    onChange(e.target.value);
  }

  return (
    <View>
      <View>
        <Text>title</Text>
      </View>
      <View>
        <TextInput
          style={styles.input}
          onChange={handleChange}
          value={props.childNameValue}
        />
        <View />
      </View>
    </View>
  );
}

I've stripped out some styles and imports to keep it simple, when entering text on the BasicTextInput, the console log I get in my parent is 'Undefined'

I imagine I'm missing something simple but any help would be very appreciated! I have a number of these to do so want to get this initial component correct.

Thanks in advance.