I'm using react-masonry-css to display cards themed with bootstrap.

Everything is nice and tidy when I add a test array such as :

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>
}

But when I load an imported component generated with useEffect() containing a card array (with async data), all of the cards are displayed on the same column.

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>
}

This is the generating code for the array:

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}
    </>
  )

}

I think it may be a rendery problem, but I can't really find a way to solve it.