React does not recognize the `justifyContent` prop on a DOM element

const useStyles = makeStyles((theme) => ({
root:{
    padding: 0,
    textAlign: 'left',
    flexDirection: '100vh',
},
}));
    

return (
    <Container>
    <div className={classes.root}>
    <Grid container spacing={2} className={classes.Grid} justifyContent="center">
        <Grid item xs={12}>
            <RadioGroup row  aria-label="type" name="name"  className={classes.weightradio} defaultValue={"1"} value={weightRadio} onChange={handleWeightRadio}> 
                <FormControlLabel value="1"  control={<Radio />} label="1kg" />
                <FormControlLabel value="2"  control={<Radio />} label="2kg" />
                <FormControlLabel value="others"  control={<Radio />} label=">3kg" />
            </RadioGroup>
        </Grid>
        .....
   </Gid>

log show me---

index.js:1 Warning: React does not recognize the justifyContent prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase justifycontent instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I have checked the doc of MUI 4.0, justifyContent is supported, where is the problem.