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 я вижу, что state содержит данные, но не реквизиты.Мне удалось получить массив в подпорки, но не {x:, y:, w:, h:, i:}, необходимый для работы сетки с импортированными данными.