MUI useStyles/createStyles hook issue. Styles only being applied to one component but not working on the next one

I am using the makeStyles, createStyles hooks here to style my MUI5 react app. In the code below the styling is being applied perfectly to root className but not to the logoIcon. Have not been able to debug the issue for a while

import { AppBar, Toolbar } from "@mui/material";

import PetsIcon from "@mui/icons-material/Pets";

import { createStyles, makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme) =>
  createStyles({
    root: {
      backgroundColor: theme.palette.primary.light,
    },
    logoIcon: {
      height: "5rem",
      width: "5rem",
    },
  })
);

export const Navbar = () => {
  const classes = useStyles();

    return (
        <AppBar elevation={0}>
            <Toolbar className={classes.root}>
                <PetsIcon
                className={classes.logoIcon}
                // sx={{ height: "5rem", width: "5rem" }}
                />

            </Toolbar>
        </AppBar>
    );
  
};

The logo icon is not being styled. However when i comment out the className={classes.logoIcon} line and uncomment the sx line, styles are being applied. I have went over the documentation multiple times and cannot spot my error. Any help would be greatly appreciated. Thank you