Estoy usando react-masonry-css para mostrar tarjetas temáticas con bootstrap.

Todo está bien y ordenado cuando agrego una matriz de prueba como:

 const breakpointColumnsObj = { default: 3, 1000: 2, 800: 1, }; function MasonryShow(props) { return ( <Masonry breakpointCols={breakpointColumnsObj} className="my-masonry-grid" columnClassName="my-masonry-grid_column" > {[<MyCard />, <MyCard />, <MyCard />]} </Masonry> }

Pero cuando cargo un componente importado generado con useEffect() que contiene una matriz de tarjetas (con datos asíncronos), todas las tarjetas se muestran en la misma columna.

 import GeneratedCards from "../components/CardArray"; const breakpointColumnsObj = { default: 3, 1000: 2, 800: 1, }; function MasonryShow(props) { return ( <Masonry breakpointCols={breakpointColumnsObj} className="my-masonry-grid" columnClassName="my-masonry-grid_column" > {<GenerateCards/>} </Masonry> }

Este es el código generador de la matriz:

 function GenerateCards(props) { function MyCard(cardData) { return ( <div class="card d-block mx-auto mb-4 shadow-sm" style={{ width: "18rem" }}> <img src="/assets/square.png" class="card-img-top" alt="..." /> <div class="card-body"> <h5 class="card-title">#Test</h5> <div style={{ textAlign: "left" }}> </div> </div> </div> ) } const items = [] for (const data in props.metadata) { items.push(<MyCard metadata={data} />) } return ( <> {items} </> ) }

Creo que puede ser un problema de renderizado, pero realmente no puedo encontrar una manera de resolverlo.