Simple way to display text in the middle of 2 horizontal lines in Material-Ui

midtext.js

import { Grid, Divider, Typography } from '@material-ui/core'

//Could use makeStyles here but it's harder to understand
const MidText = ({text}) => {

    return ( <div style={{ padding: '8px' }}>
        <Grid container>
            <Grid item style={{ flex: 1, display: 'flex', alignItems: 'center'}}>
                <Divider style={{ flexGrow: 1 }}/>
            </Grid>
            <Grid item>
                <Typography style={{ paddingLeft: '20px', paddingRight: '20px'}}>{text}</Typography>
            </Grid>
            <Grid item style={{ flex: 1,  display: 'flex', alignItems: 'center'}}>
                <Divider style={{ flexGrow: 1 }}/>
            </Grid>
    </Grid>
    </div>)
}

export default MidText

Fully responsive with the use of material-ui grid and flex grow