I have this code

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;

It is supposed to empty the secondCategory array and fill it with firstCategory array but when I console.log secondCategory array I get [undefined,undefined,undefined,undefined] and I get the error message 'cannot read property name of undefined'. I know that there are many other ways to achieve the wanted result but I want to know exactly the cause of this problem in this specific situation.