Problems in Grid when using material UI

Hello am trying to build card sets using material UI I’ve sorted data from a javascript object but when I compile the result is not what am looking for here’s the code am using.

const CardFeatures = () => {

const [features, setFeatures] = useState([
    { title: 'Feature 1', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.', icon: <Assignment />, id: 1 },
    { title: 'Feature 2', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.', icon: <Autorenew />, id: 2 },
    { title: 'Feature 3', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.', icon: <Bookmark />, id: 3 },
    { title: 'Feature 4', body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.', icon: <Bookmark />, id: 4 },
])

const useStyles = makeStyles((theme) => ({
    root: {
        minWidth: 275,
        marginTop: theme.spacing(7),
        marginBottom: theme.spacing(7),
        borderRadius: 16,
        elevation: 'FF0000',
        boxShadow: 'rgb(140 152 164 / 25%) 0px 3px 6px 0px'

    },
    title: {
        fontSize: 16,
        marginLeft: theme.spacing(2),
        fontWeight: "bold"
    },
    description: {
        marginLeft: theme.spacing(2),
        marginTop: theme.spacing(2),
        fontSize: 22,
        marginBottom: theme.spacing(2),
        color: '#808080'
    },
    green: {
        color: '#fff',
        backgroundColor: green[500],
        width: theme.spacing(6),
        height: theme.spacing(6),
        marginLeft: theme.spacing(2),
        marginTop: theme.spacing(2),
        marginBottom: theme.spacing(2)
    }
}));


const classes = useStyles();

return (
    <div>
        {features.map(feature => (

            <Card className={classes.root} key={feature.id} elevation='0'>
                <CardContent>
                    <Avatar aria-label='recipe' className={classes.green}>{feature.icon} </Avatar>
                    <Typography className={classes.title} color='textPrimary' gutterBottom>
                        {feature.title}
                    </Typography>
                    <Typography className={classes.description}>
                        {feature.body}
                    </Typography>
                </CardContent>
            </Card>
        ))}
    </div>
);
}

export default CardFeatures;

And the result is this:

instead of this:

P.S.: the second picture coded manually

Answer

i’ve tried this one and it worked for me

 <Grid container spacing={3}>
                {features.map(feature => (
                    <Grid item xs={12} md={6} lg={4}>
                        <Card className={classes.root} key={feature.id}>
                            <CardContent>
                                <Avatar className={classes.green}>{feature.icon} </Avatar>
                                <Typography className={classes.title} color='textPrimary' gutterBottom>
                                    {feature.title}
                                </Typography>
                                <Typography className={classes.description}>
                                    {feature.body}
                                </Typography>
                            </CardContent>
                        </Card>
                    </Grid>
                ))}
            </Grid>

I wrapped the map with a container and wrapped the card with Grid and it worked