react appbar width not sizing properly - reactjs

Question

In my react project I am trying to adjust the appbar width. As of now it is pushed to far to the left as shown in picture below.
The custom class I am trying to use is not doing anything. No error messages, just not working.
Does anyone see what I am doing wrong?
import AppBar from "#mui/material/AppBar";
import Toolbar from "#mui/material/Toolbar";
const drawerWidth = 200; //240
const useStyles = makeStyles((theme) => {
return {
page: {
background: "#f1f1f1",
width: "100%",
padding: useTheme().spacing(3),
},
drawer: {
width: drawerWidth,
},
drawerPaper: {
width: drawerWidth,
},
root: {
display: "flex",
},
active: {
background: "#f4f4f4",
},
appbar: {
width: `calc(100% - ${drawerWidth}px)`,
},
// toolbar: theme.mixins.toolbar,
};
});

Answer 1

Update: You can correct the problem by doing this instead:
appbar: {
width: 'calc(100% - '+drawerWidth+'px)'
},
I think something must have changed between versions of react that allowed his to work and ours not too.
I have the following configurations and it is now working fine
"react": "^16.13.0",
"react-dom": "^16.13.0".
I noticed the code is highlighted differently in my VS Code than in https://www.youtube.com/watch?v=0WbrOfmvjvU&list=PL4cUxeGkcC9gjxLvV4VEkZ6H6H4yWuS58&index=16