Need Help: Not able to add gutter between the cards.

[Bikashd4332]

I've specified, gutter in MaonsryOption.

// Masonry Options
const masonryOptions: MasonryOptions = {
    fitWidth: true,
    columnWidth: 365,
    gutter: '50',
    itemSelector: '.user-post',
    resize: true,
};

and used that like this.

  <Box
      as={Masonry}
      elementType="ul"
      width="100%"
      options={masonryOptions}
      disableImagesLoaded={false}
      updateOnEachImageLoad={false}
  >
      {listOfCards.map((card) => (
          <WallOfFameCard key={card.id} {...card} {...{ showOnlyWallOfFame }} />
      ))}
  </Box>

These are my children components that I render

<Box as="li" className="user-post" css="list-style-type: none; text-indent: 0">
    <Box borderRadius="8px" overflow="clip" border="solid 1px" borderColor="black-10">
    .......

Yet I don't see any gutter between them.