Display react components in grid structure

Question

I have a React application that is displaying a number of buttons in a modal that form part of a button group. The values for these buttons are set up in the state object as shown below.

At the moment these buttons display within my modal each on a separate line one after the other.

I would like to have them displayed in a grid type structure. As there are 5 of them this might be 2 on the first 2 lines and then the last one on the third line perhaps centered if possible.

How could I go about doing this? Sorry I realise I've not offered a solution attempt for this but I'm not sure where to start. I've been searching online and can't find any examples that match what I am trying to do i.e. where the actual data for the table is set in state. I will continue to do more research but thought I'd ask on here to see if someone could offer any tips.

const marginSelectionControls = [
    { label: '21+', type: '21plus' },
    { label: '16-20', type: '16to20' },
    { label: '11-15', type: '11to15' },
    { label: '6-10', type: '6to10' },
    { label: '1-5', type: '1to5' }
];

const MarginSelectionControls = (props ) => (

    <div className="btn-group">
        <ButtonGroup toggle={this.toggle}>
        {marginSelectionControls.map( ctrl => (
            <MarginSelectionControl
                key={ctrl.label}
                label={ctrl.label}
                selectMargin={(winningMargin) => props.selectMargin(ctrl.label)}
                selectedmargin={props.selectedmargin}
            />
        ))}
        </ButtonGroup>
    </div>
);

##########################################

const MarginSelectionControl = (props) => {
    const MarginSelectionControlClasses = [classes.PredResSelectControl];
    if (props.selectedmargin === props.label) {
        MarginSelectionControlClasses.push(classes.Less);
    }
    else {
        MarginSelectionControlClasses.push(classes.More);
    }

    return (
        <div className={classes.MarginSelectionControl}>
            <button
                type="button"
                label={props.label}
                className={MarginSelectionControlClasses.join(' ')}
                onClick={props.selectMargin}
                selectedmargin={props.selectedmargin}
            >{props.label}</button>
        </div>
        )
};