Bagaimana cara mengirim data dari child ke parent component di React?

Saya ingin mendapatkan data indeks yang berada pada child component seperti yang tertera pada kode berikut,

import React, { useEffect, useState } from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  return <Parent />;
}

const Parent = () => {
  const [data, setData] = useState(dataSource);

  const updateView = (isSub, index, subIndex) => {
    const array = [...data];
    if (!isSub) {
      array[index]['isShow'] = !array[index]['isShow'];
    } else {
      array[index]['sub_data'][subIndex]['isSubShow'] =
      !array[index]['sub_data'][subIndex]['isSubShow'];
    }
    setData(array);
    console.log(array[index]['sub_data'][subIndex]['isSubShow'])
  };

  return (
    <ScrollView>
      <View>
        {data.map((item, key) => (
          <Child
            key={key}
            onClickFunc={() => updateView(false, key)}
            // I want to get child key data here
            onClickSubFunc={() => updateView(true, key, 0)}
            items={item}
          />
        ))}
      </View>
    </ScrollView>
  );
};

const Child = ({ items, onClickFunc, onClickSubFunc, subKey=0 }) => {
  const [viewControl, setViewControl] = useState(0);
  const [viewSubControl, setViewSubControl] = useState(0);
console.log(items.sub_data[0])
  useEffect(() => {
    if (items.isShow) {
      setViewControl(null);
    } else {
      setViewControl(0);
    }
  }, [items.isShow]);

  useEffect(() => {
    if (items.sub_data[subKey].isSubShow) {
      setViewSubControl(null);
    } else {
      setViewSubControl(0);
    }
  }, [items.sub_data[subKey].isSubShow]);

  return (
    <View
      style={{
        flex: 1,
        alignItem: 'center',
        justifyContent: 'center',
      }}>
      <TouchableOpacity
        style={{
          width: '100%',
          height: 40,
          borderWidth: 1,
          backgroundColor: '#897548',
          borderColor: '#000000',
        }}
        onPress={onClickFunc}>
        <Text style={{ color: '#ffffff' }}>Button</Text>
      </TouchableOpacity>
      <View style={{ height: viewControl, overflow: 'hidden' }}>
        {items.sub_data.map((data, key) => (
          <View key={key}>
            <TouchableOpacity
              // I want to pass this key index to parrent
              style={{
                width: '100%',
                height: 50,
                borderWidth: 1,
                borderColor: '#000000',

              }}
              onPress={onClickSubFunc}>
              <Text>Sub Button</Text>
            </TouchableOpacity>
            <View style={{ height: viewSubControl, overflow: 'hidden' }}>
              <View>
                <Text>Subtext</Text>
              </View>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

const dataSource = [
  {
    id: 1,
    isShow: false,
    sub_data: [
      {
        id: 'sub1',
        isSubShow: false,
      },
      {
        id: 'sub2',
        isSubShow: false,
      },
    ],
  },
  {
    id: 2,
    isShow: false,
    sub_data: [
      {
        id: 'sub1',
        isSubShow: false,
      },
      {
        id: 'sub2',
        isSubShow: false,
      },
      {
        id: 'sub3',
        isSubShow: false,
      },
    ],
  },
];

Apakah ada cara untuk passing data-nya? berikut untuk testingnya:

https://snack.expo.io/@arxgon/question