CSS showing differently for Deployed then localhost when moved from material-ui version 4 to mui version 5

Question

Image for Development Environment:

Image for localhost:

As is visible jss6 css is what is coming from makeStyles-sidebar 6 but on deployed version there is some extra css being applied with same name as jss6

I have redeployed the code many times after clearing out the cache still problem persist

This issue started happening after Material-ui version was updated from "@material-ui/core": "^4.11.0" to "@mui/core": "^5.0.0-alpha.53" and "@mui/styles": "^5.6.2",

I believe there is issue in makeStyles but why then it is happening only for one component

Previous implementation of create theme

import { createTheme } from '@material-ui/core/styles';

Newer Implementation of create theme

import { createTheme } from '@mui/material/styles';

previous implementation of make styles:

import { makeStyles } from "@material-ui/core";

newer implementation of make styles:

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

Code:

export const useStyles = makeStyles(() => {
    return (
        {
            //one of the problems
            sidebar: {
                backgroundColor: "#39414D",
                whiteSpace: "no-wrap"
            },
            sidebarItemContainer: {
                height: "70px",
                padding: "10px",
                display: "flex",
                alignItems: "center",
                justifyContent: "flex-start",
                cursor: "pointer"
            },
            sidebarItemIcon: {
                paddingRight: "10px",
                color: "#99A6B6"
            },
            sidebarItemText: {
                color: "#99A6B6"
            }
        }
    )
})