So I wanted to minimize my lines and used map to render Material UI TextField. The desired outcome is three columns in wider screen using <Grid item xs={12} md={4}>. For those who don't use Material UI, md={4} is three columns in medium to large screens.

    <Grid className={classes.root}>
        <Grid container >
            <Grid item xs={12} md={4} style={{width: "33.33%", flexDirection: "row !important"}}>
                {Object.entries(data).map(([_, val]) =>{
                    return val.map(elm =>{
                        return (
                            <TextField 
                                label={elm.label} 
                                value={elm.value}  
                                name={elm.name}  
                                key={elm.name}  
                                disabled
                            />
                        )
                    })
                })}
            </Grid>
        </Grid>
    </Grid>

But, in using map as seen above, everything is rendered in one column. I tried many css tricks as you can see style={{width: "33.33%", flexDirection: "row !important"}}>.

If anyone wants to reproduce it, here's the JSS and data

    const useStyles = makeStyles((theme) => ({
        root: {
            padding: theme.spacing(1),
            flexGrow: 1,
            flexDirection: "row",
            alignItems: "center",
            align: "center",
            "& .MuiFormControl-root": {
                margin: theme.spacing(2),
            "& .MuiGrid-item": {
                margin: "0 auto",
                maxWidth: "1000px",
                width: "100%",
                display: "flex",
                right: 0,
                textAlign: "center",
                flexWrap: "wrap",
            }
            }
        },
    }));

        const data = {
        "Social Security": [
            {
                label: "Deduction Type", 
                value: "Social Security", 
                name: "SocialSecurity"
            },
            {
                label: "Employer Rate", 
                value: "12.4%", 
                name: "SocialEmployer"
            },
            {
                label: "Employee Rate", 
                value: "6.2%", 
                name: "SocialEmployee"
            }
        ],
        "Medicare": [
            {
                label: "Deduction Type", 
                value: "Medicare", 
                name: "Medicare"
            },
            {
                label: "Employer Rate", 
                value: "1.45%", 
                name: "MedicareEmployer"
            },
            {
                label: "Employee Rate", 
                value: "2.9%", 
                name: "MedicareEmployee"
            }
        ]
    }