Giving props to other component React Native not working - react-native

Question

I'm trying to give the data of a certain person to the other component but for some reason this only gives errors.
I tried doing that with the props method as it should but that does not work.
What can be the solution?
Parent:
export default function EditFamily({ navigation, props, person, inheritors }) {
const [shouldShowAdd, setShouldShowAdd] = useState(null);
const [shouldShowAddChild, setShouldShowAddChild] = useState(null);
function renderFamily(family, key) {
return (
<View key={key} style={styles.family}>
<View style={styles.inheritors}>
{family.inheritors.map((inheritor) => {
return (
<Add
key={inheritor.id}
person={inheritor}
setShouldShowAdd={setShouldShowAdd}
/>
);
})}
</View>
{family.children && family.children.length ? (
<View style={styles.children}>
{family.children.map((child, index) => renderFamily(child, index))}
</View>
) : null}
</View>
);
}
return (
<View style={styles.container}>
<SafeAreaView style={styles.container}>
{shouldShowAdd ? (
<View style={styles.details}>
<View style={styles.pressView}>
<Pressable
onPress={() => setShouldShowAdd(null)}
style={styles.pressX}
>
<Text>X</Text>
</Pressable>
</View>
<Pressable>
<Text>Edit date of {shouldShowAdd.firstname}</Text>
</Pressable>
<Pressable
onPress={() => setShouldShowAddChild(!shouldShowAddChild)}
>
<Text>Add child</Text>
</Pressable>
{shouldShowAddChild && <AddChild />}
<Pressable>
<Text>Add Partner</Text>
</Pressable>
<Pressable>
<Text>Add Parent</Text>
</Pressable>
</View>
) : null}
<ScrollView>
<ScrollView horizontal={true}>{renderFamily(data)}</ScrollView>
</ScrollView>
</SafeAreaView>
<StatusBar style="auto" />
</View>
);
}
Component that gives data to the parent:
export default function Add({ person, setShouldShowAdd }) {
let mijnFoto = 'http://192.168.1.36/CodingApp/assets/' + person.image;
return (
<TouchableOpacity
style={styles.person}
onPress={() => setShouldShowAdd(person)}
>
<Text style={styles.text}>
{person.firstname} {person.lastname}
</Text>
</TouchableOpacity>
);
}
The component that should for example be able to show the Id of the person that's been clicked:
export default function AddChild({ setShouldShowAdd }) {
return (
<View>
<Text>hoi id:{person.id}</Text>
</View>
);
}