Is this an Array of Object BUG? Ionic v6 React

Question

As the image shows, it only renders one array of objects.

How to reproduce:

Create a Blank Template and paste this code on ExploreContainer.tsx:

import {
  IonCard,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonCardContent,
} from '@ionic/react'
import { useEffect, useState } from 'react'
import './ExploreContainer.css'

interface ContainerProps {}

interface TestArrayObject {
  key: string
  id: string
  name: string
  age: number
}

const ExploreContainer: React.FC<ContainerProps> = () => {
  const [testArray, setTestArray] = useState<TestArrayObject[]>([])

  const arraySample: TestArrayObject[] = [
    {
      key: '1',
      id: '12345',
      name: 'Jack',
      age: 40,
    },
    {
      key: '2',
      id: '67890',
      name: 'Black',
      age: 30,
    },
  ]

  useEffect(() => {
    arraySample.map((arr: TestArrayObject) => {
      setTestArray([...testArray, arr])
    })
  }, [])

  const listArray = testArray.map((arr) => {
    return (
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>{arr.id}</IonCardSubtitle>
          <IonCardTitle>{arr.name}</IonCardTitle>
        </IonCardHeader>

        <IonCardContent>
          Keep close to Nature's heart... {arr.age}
        </IonCardContent>
      </IonCard>
    )
  })

  return <>{ listArray }</>
}

export default ExploreContainer

I'm trying to figure out the solution, but happens that i`m more than 24hours trying to figure out and nothing. could someone help?