React Packery реагирует-сетка-макет, сетка не выкладывается горизонтально

Question

Я использую STRML response-grid-layout, пакетную сетку для React. Я беру объект массива в пользовательском интерфейсе. Но предметы не заполняют сетку. Я пытаюсь понять, почему это так.

    renderData() {
        return  this.state.data.length > 1 
           ? this.state.data.map((item) => (  // Here is the data 
            <Card className="grid-item" key={item.sku} >
                <CardImg src={item.image} />
                {/* <CardTitle> {item.sku} </CardTitle>
                <CardBody> {item.name} </CardBody> */}
            </Card>  
             )) 
           : null         
    }

    render() {
        return (
            <div>
                <div className="album">  
                    <Container>                   
                        <GridLayout className="grid" cols={3} margin={[40,20]}  rowHeight={240} width={1000}  >   
                            {this.renderData()} 
                        </GridLayout>   
                    </Container>
                </div>
            </div>          
        );
    }
} // END
export default App

Я импортирую массив объектов. Пока что он будет заполнять пользовательский интерфейс, но не будет правильно формировать сетку. Предметы располагаются вертикально. В React Dev Tools я вижу, что состояние имеет данные, но не реквизиты. Мне удалось получить массив в подпорки, но я не использовал {x:, y:, w:, h:, i: }, чтобы сетка работала с импортированными данными.