How to align table pagination internal components (captions,Actions) - reactjs

Question

I was able to center the 'entire' table pagination but I couldn't align the internal components of tablePagination from MaterialUI separately with the code below.I would like to center the Pagination caption and 'right' action components.
Pagination: {
display:'flex',
justifyContent: 'center',
width: "100%",
alignItems: 'left',
padding:'0px',
},
PaginationCaption: {
color: 'white',
fontSize: '1.8rem',
flexShrink: 0,
// width: '50%',
textAlign: 'center',
},
PaginationSelectIcon: {
color: 'white',
fontSize: '1.8rem'
},
PaginationSelect: {
color: 'white',
fontSize: '1.8rem'
},
PaginationActions: {
color: 'white',
fontSize: '1.8rem',
// width: '50%',
textAlign: 'right',
}
<Grid container
alignItems="center"
justify="center"
>
<Grid item xs={12} style={{height:'38vh'}}>
<div className={classes.tableWrapper}>
<Table className={classes.table}>
<TableHead style={{backgroundColor:'#4e4e4e'}}>
<TableRow >
<TableCell component="th" scope="row" className=
{classes.tablecell} style={{width: '20%'}}> License Plate</TableCell>
<TableCell align="right" className={classes.tablecell}
style={{width: '20%'}}> Status</TableCell>
<TableCell align="right" className={classes.tablecell}
style={{width: '20%'}}> IN </TableCell>
<TableCell align="right" className={classes.tablecell}
style={{width: '20%'}}> OUT </TableCell>
<TableCell align="right" className={classes.tablecell}
style={{width: '20%'}}> Time on-site</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.slice(page * rowsPerPage, page * rowsPerPage +
rowsPerPage).map(row => (
<TableRow key={row.name} >
<TableCell component="th" scope="row" className=
{classes.tablecell}>
{row.name}
</TableCell>
<TableCell align="right" className={classes.tablecell}>
{row.calories}</TableCell>
<TableCell align="right" className={classes.tablecell}>
{row.fat}</TableCell>
<TableCell align="right" className={classes.tablecell}>
{row.calories}</TableCell>
<TableCell align="right" className={classes.tablecell}>
{row.fat}</TableCell>
</TableRow>
))}
{emptyRows > 0 && (
<TableRow style={{ height: 48 * emptyRows }}>
<TableCell colSpan={6} />
</TableRow>
)}
</TableBody>
</Table>
</div>
<TablePagination
component="div"
className={classes.Pagination}
classes={{
// root: classes.Pagination,
caption: classes.PaginationCaption,
selectIcon: classes.PaginationSelectIcon,
select: classes.PaginationSelect,
actions: classes.PaginationActions,
}}
// rowsPerPageOptions={[5, 7, 10]}
colSpan={5} // Important!!!!
count={rows.length}
rowsPerPageOptions={[]} //added
rowsPerPage={rowsPerPage}
page={page}
SelectProps={{
inputProps: { 'aria-label': 'Rows per page' },
native: true,
}}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
ActionsComponent={TablePaginationActions}
/>
</Grid>
</Grid>
I've also have looked into the source code of tablePagination and tried the css styles there as well. But the results are the same.