Material UI: Conditional class names not having any effect using classnames library

Question

I am trying to conditionally render class names using classnames npm library and in the DOM it seems they are getting added but I am unable to see the CSS effects behind those classes. I am mainly trying to change the border conditonally.

Below are relevant classes with CSS in useStyles:

import classNames from 'classnames';

const useStyles = makeStyles(theme => ({
 newOrderBorder: {
   border: `2px solid ${theme.palette.primary.main}`
 },
 orderSectionBorder: {
  border: 'unset'
 },
 orderSection: {
   backgroundColor: theme.palette.secondary.main,
   marginTop: theme.spacing(1),
   paddingTop: theme.spacing(0.5),
   paddingBottom: theme.spacing(0.5)
 }
}));

Below Im trying to set conditions to set status of the class names and attempting to use them in the code (short snippet):

const CompanyOrder = props => {
  const classes = useStyles();
  
//setting classnames
  const borderColorByStatus = classNames({
    newOrderBorder: orderStatus === 'new',
    orderSectionBorder: orderStatus !== 'new',
    orderSection: true
  })
  return (
    <Grid className={borderColorByStatus} container>   //trying to use borderColorByStatus
        <Grid container direction='column' item xs={2}>
          <Typography className={classes.orderTitle} color="textSecondary">
            Product Name
          </Typography>
          <Typography variant='h2' component='h3'>
           {name}
          </Typography>
        </Grid>
    </Grid>
  );
}

In the DOM I notice that the classnames are being correctly identified but these classes are not having any effect unfortunately.