Generating table with Grids and Map in React Js

I'm having a Box inside a Grid item, and currently the Box is attached to the top left of the Grid Like this Image. Now I want to make the Box stay in the center of the Grid. I have tried justify, justifyContent, align, alignItems and none of them worked. Please help me

Here is my code:

const singleBox = {
    border: 1,
    borderColor: "black",
    borderStyle: "solid",
    borderRadius: 16,
    width: 485,
    height: 300,
    align: "center",
    justifyContent: "center", 
    alignItems: "center",
    position: "absolute",
    display: "flex",
}

const GridCell = {
    align: "center",
    justifyContent: "center", 
    alignItems: "center",
    position: "absolute",
    display: "flex",
}

function SingleBox({props}) {
    // console.log(props)

    return(
        <Grid item md = {4} css = {GridCell}>
            <Box css = {singleBox}>
                <p>{props.name}</p>
            </Box>
        </Grid>
    )    
}

Here is the code in the App.js

const singleRow = {
    height: 350,
    // margin-right: 50,
    marginLeft: 50,
}
<Grid container  style = {singleRow}>
 {personRow}
</Grid>