как создать пространство между элементами списка в React Material

Я изучаю React Material и хочу иметь пространство между каждой строкой в ​​React Material List, но я не могу понять, как это сделать.

Я прочитал материалы по документации, но не могу понять этого, потому что я новичок

Пробую примерно так:

  <li className="list-group-item" key={el.id}>
                {el.title}
            </li>

Используется list-group-item, потому что он работает с другим списком, но не работает сейчас.

Изображение двух строк списка, между которыми нет вертикального промежутка

  import React, { Component } from 'react';
import { Grid, Paper, Typography } from "@material-ui/core";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import { connect } from "react-redux";
import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import Avatar from '@material-ui/core/Avatar';
import ImageIcon from '@material-ui/icons/Image';
import WorkIcon from '@material-ui/icons/Work';
import BeachAccessIcon from '@material-ui/icons/BeachAccess';
import Divider from '@material-ui/core/Divider';
import { withStyles } from '@material-ui/styles';
const styles = theme => ({
    root: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        border: 0,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        padding: '0 30px',
    },
});
export class Posts extends Component {
    constructor() {
        super();
    }

    componentDidUpdate(prevProps) {

    }

    render() {
        const { classes } = this.props;
        return (
            <ul className="list-group list-group-flush">
                {this.props.books.map(el => (
                    <List className={classes.root}>
                        <ListItem>
                            <ListItemText primary="Title" secondary={el.title} />
                        </ListItem>
                        <Divider variant="middle" component="li" />
                        <ListItem>
                            <ListItemText primary="Author" secondary={el.author} />
                        </ListItem>
                        <Divider variant="middle" component="li" />
                        <ListItem>
                            <ListItemText primary="Genre" secondary={el.genre} />
                        </ListItem>
                        <Divider variant="middle" component="li" />
                        <ListItem>
                            <ListItemText primary="Price" secondary={el.price} />
                        </ListItem>
                    </List>
                ))}
            </ul>
        );
    }
}

function mapStateToProps(state) {
    return {
        books: state.reducer.booksList
    }
}

export default connect(mapStateToProps)(withStyles(styles)(Posts));

Вот строка в списке:

 <book id="13543">
    <author>Roger, more</author>
    <title>Helping hand club</title>
    <genre>Space</genre>
    <price>234.00</price>
  </book>