MUI makeStyles isn't working on the Card component

Question

I have this component called Product which is based off this example. Here is my component:

Product.tsx:

import useStyles from './useStyles'

const Product: React.FC = () => {
  const classes = useStyles();

  return (
    <Card className={classes.secondaryBorder}>
      <CardActionArea>
        <CardContent>
          <Typography gutterBottom variant="h5">
            This is my title
          </Typography>

          <Typography variant="body2" color="text.secondary">
            This is my body
          </Typography>
        </CardContent>
      </CardActionArea>
    </Card>
  );
};

useStyles.ts:

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  secondaryBorder: {
    border: '2px solid blue',
  },
  flex: {
    display: 'flex',
  },
});

The problem is that the Card component does not have the secondaryBorder i.e. it does not have a blue border around it. So what is the problem?

Thank you!