Компоненты не отображаются при динамическом создании с помощью array.map в React

Я учусь реагировать. Я хотел создать в контейнере 8 одинаковых элементов.

Ниже мой код

class Card extends React.Component{
    render(){
        return(
          <div className = "card">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          </div>
        )
    }
}

Компонент контейнера представлен ниже.

class Cardholder extends React.Component{
    render(){
        const cards = new Array(9).map((e,i)=> <Card key = {i}/>);
        return(
            <div>
                {cards}
            </div>
        );
    }
}

export default Cardholder;

Оба компонента находятся в одном файле. Компоненты не отображаются. Ошибок нет. В консоли браузера отображается следующее сообщение.

[Log] [HMR] Waiting for update signal from WDS...

[Info] [WDS] Hot Module Replacement enabled.

Когда я даю массив как

new Array(9).fill(<Card/>) 

оно работает. Но существует "ключевая" ошибка, поскольку для элементов не указано значение ключа.