react render using map on Grid - reactjs

Question

I'm trying to build a page that shows the weather in all the locations mentioned in a list.
I want to render a card for each location and sort the cards next to each other so every row will contain 5 location cards [][][][][],
currently, it renders only one under the other in a column:
how can I solve this?
(weather.favoritesWeather is a list that contains all the data which needs).
const FavoriteWeatherCards = weather.favoritesWeather.map(
(favoriteLocation) => (
<div>
<Row className="justify-content-md-center">
<Col md={3} >
<SmallConditionsCard data={favoriteLocation} />
</Col>
</Row>
</div>
)
);
return <div>
{FavoriteWeatherCards}
</div>;
};
code :
const SmallConditionsCard = ({data}) => {
const { location, weather } = data;
let history = useHistory();
const handleClick = () => {
history.push('/');
};
return (
<div>
<Card>
<CardHeader
sx={{ background: 'ghostwhite' }}
title={
<Typography align="center" variant="h5">
{location.name}
</Typography>
}
/>
<CardContent sx={{ textAlign: 'center' }}>
<WeatherIcon
number={weather[0].WeatherIcon}
xs={12}
sx={{ maxHeight: 200, maxWidth: 200 }}
/>
<Typography variant="h6">{weather[0].WeatherText}</Typography>
<Typography variant="p">
{formatTemp(weather[0].Temperature.Metric.Value, celcius)}
</Typography>
</CardContent>
<CardActions>
<Button size="small" onClick={handleClick}>Learn More </Button>
</CardActions>
</Card>
</div>
);
};
this is the result now:

Answer 1

If you are using react-bootstrap you need your container
const FavoriteWeatherCards = weather.favoritesWeather.map(
(favoriteLocation) => (
<Row className="justify-content-md-center">
<Col>
<SmallConditionsCard data={favoriteLocation} />
</Col>
</Row>
)
);
return <Container>
{FavoriteWeatherCards}
</Container>;
};
In case that you want to render something using material UI grid could be something like this
const FavoriteWeatherCards = weather.favoritesWeather.map(
(favoriteLocation) => (
<Grid item xs={3}>
<Item>
<SmallConditionsCard data={favoriteLocation} />
</item>
</Row>
</Grid>
)
);
return <Grid container spacing={2}>
{FavoriteWeatherCards}
</grid>;
};