tengo este codigo

 import React from 'react'; import { Button, Image, StyleSheet, Text, View } from 'react-native'; function App() { const firstCategory = [ { id: 1, name: 'person1' }, { id: 2, name: 'person2' }, { id: 3, name: 'person3' }, { id: 4, name: 'person4' }, ]; const [secondCategory, setSecondCategory] = React.useState([ { id: 5, name: 'person5' }, { id: 6, name: 'person6' }, { id: 7, name: 'person7' }, { id: 8, name: 'person8' }, ]); React.useEffect(() => { setSecondCategory([]); for (var i = 0; i < firstCategory.length; i++) { setSecondCategory((secondCategoryArray) => [...secondCategoryArray, firstCategory[i]]); } },[]); return ( <View> {secondCategory.map((item) => { return <Text>{item.name}</Text>; })} </View> ); } export default App;

Se supone que debe vaciar la matriz de segunda categoría y llenarla con la matriz de primera categoría, pero cuando consola. registro la matriz de segunda categoría obtengo [indefinido, indefinido, indefinido, indefinido] y aparece el mensaje de error 'no se puede leer el nombre de propiedad de indefinido'. Sé que hay muchas otras formas de lograr el resultado deseado, pero quiero saber exactamente la causa de este problema en esta situación específica.