Align-center for text and item not aligning?

Question

I am trying to align the items in a div (that is within an MUI Select styled component):

const SelectStyle = styled(Select)(({ theme }) => ({
    width: WIDTH,
    border: `1px solid ${theme.palette.grey[400]}`,
    borderRadius: 3,
    fontSize: '1.2rem',
    '&:hover': {
        backgroundColor: theme.palette.grey[300],
        border: `1px solid ${theme.palette.grey[500]}`,
    },
    '&:focus': {
        backgroundColor: theme.palette.grey[700],
        border: `1px solid ${theme.palette.grey[700]}`,
    },
    '& .MuiSelect-select': {
        paddingTop: 5,
        paddingBottom: 5,
        fontSize: '1.2rem',
        alignItems: 'center',
        display: 'inline-flex'
    },
}));

I can see that the effect has been applied to the parent div:

However, I still see that the text and the icon don't look center aligned ("Text" looks higher than the icon):

Is there a reason for this? And how do I make it more center aligned?