@mui/material-ui v5.13.3 theme.transitions.create('padding' ... ) breaks node.clientWidth /clientHeight calculation

Question

I have this mui project with drawer on the left (fixed position), and webpage content on the right.

When I clicked the button Click to hide/show drawer button it will hide/show the drawer with padding transition

When the mui padding transitions (theme.transitions.create('padding' ... )) are bing used, the calculation of the container of the webpage content on the right (node.clientWidth) will always be incorrect/one-step-behind

const Main = styled(
  ({ drawerWidth, open, ...restProps }) => <main {...restProps} />,
  {}
)(({ theme, open, drawerWidth }) => ({
  flexGrow: 1,
  // padding: theme.spacing(3),
  padding: "48px 0 50px",

  transition: theme.transitions.create("padding", {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),

  // marginLeft: `-${drawerWidth}px`,

  ...(open && {
    transition: theme.transitions.create("padding", {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
    // marginLeft: 0,
    padding: "48px 0 50px 256px",
  }),
}));

If I removed/disable all the theme.transitions.create('padding' ... ) inside the Main.js styled component, then the node.clientWidth will return the correct value

const Main = styled(
  ({ drawerWidth, open, ...restProps }) => <main {...restProps} />,
  {}
)(({ theme, open, drawerWidth }) => ({
        flexGrow: 1,
        // padding: theme.spacing(3),
        padding: "48px 0 50px",

        // transition: theme.transitions.create('padding', {
        //     easing: theme.transitions.easing.sharp,
        //     duration: theme.transitions.duration.leavingScreen,
        // }),

        // marginLeft: `-${drawerWidth}px`,

        ...(open && {
            // transition: theme.transitions.create('padding', {
            //     easing: theme.transitions.easing.easeOut,
            //     duration: theme.transitions.duration.enteringScreen,
            // }),
            // marginLeft: 0,
            padding: "48px 0 50px 256px",
        }),
}));

Sandbox URL: https://codesandbox.io/p/sandbox/eloquent-estrela-0ux6i9