Правильное продвижение холста с помощью постоянных ящиков пользовательского интерфейса материала

У меня есть приложение с двумя расширяемыми панелями инструментов. Левая панель инструментов работает так, как задумано, но мне не удалось заставить правую панель инструментов правильно подталкивать контент. См. Код ниже.

Я скопировал точный код отсюда - см. Постоянные ящики: https://material-ui.com/demos/drawers/

KeyboardListener отображается: none, а элемент SceneCanvas имеет следующий стиль:

root: {
    height: '100%',
    width: '100%',
    position: 'relative',
    zIndex: 0,
    lineHeight: 0,
    cursor: 'crosshair',
}

Желаемая функциональность заключается в том, чтобы левая и правая панели инструментов проталкивали содержимое внутрь и изменяли размер холста и содержимого холста. И советы или идеи были бы очень признательны!

import React from 'react';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import MenuItem from '@material-ui/core/MenuItem';
import Typography from '@material-ui/core/Typography';
import TextField from '@material-ui/core/TextField';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import SceneCanvas from '../../three/SceneCanvas';
import KeyboardListener from '../KeyboardListener';

const drawerWidth = 240;

const styles = theme => ({
  root: {
    flexGrow: 1,
  },
  appFrame: {
    height: 430,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
    width: '100%',
  },
  appBar: {
    position: 'absolute',
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  'appBarShift-left': {
    marginLeft: drawerWidth,
  },
  'appBarShift-right': {
    marginRight: drawerWidth,
  },
  menuButton: {
    marginLeft: 12,
    marginRight: 20,
  },
  hide: {
    display: 'none',
  },
  drawerPaper: {
    position: 'relative',
    width: drawerWidth,
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: '0 8px',
    ...theme.mixins.toolbar,
  },
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing.unit * 3,
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  'content-left': {
    marginLeft: -drawerWidth,
  },
  'content-right': {
    marginRight: -drawerWidth,
  },
  contentShift: {
    transition: theme.transitions.create('margin', {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  'contentShift-left': {
    marginLeft: 0,
  },
  'contentShift-right': {
    marginRight: 0,
  },
});

class Header extends React.Component {
  state = {
    open: false,
    anchor: 'left',
  };

  handleDrawerOpen = () => {
    this.setState({ open: true });
  };

  handleDrawerClose = () => {
    this.setState({ open: false });
  };

  handleChangeEventAnchor = (event) => {
    this.setState({
      anchor: event.target.value,
    });
  };

  render() {
    const { classes, theme } = this.props;
    const { anchor, open } = this.state;

    const drawer = (
      <Drawer
        variant = "persistent"
        anchor = {anchor}
        open = {open}
        classes = {{
          paper: classes.drawerPaper,
        }}
      >
        <div className = {classes.drawerHeader}>
          <IconButton onClick = {this.handleDrawerClose}>
            {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
          </IconButton>
        </div>
        <Divider />
        <List>Testing</List>
        <Divider />
        <List>Testing</List>
      </Drawer>
    );

    let before = null;
    let after = null;

    if (anchor === 'left') {
      before = drawer;
    } else {
      after = drawer;
    }

    return (
      <div className = {classes.root}>
        <TextField
          id = "persistent-anchor"
          select
          label = "Anchor"
          value = {anchor}
          onChange = {this.handleChangeEventAnchor}
          margin = "normal"
        >
          <MenuItem value = "left">left</MenuItem>
          <MenuItem value = "right">right</MenuItem>
        </TextField>
        <div className = {classes.appFrame}>
          <AppBar
            className = {classNames(classes.appBar, {
              [classes.appBarShift]: open,
              [classes[`appBarShift-${anchor}`]]: open,
            })}
          >
            <Toolbar disableGutters = {!open}>
              <IconButton
                color = "inherit"
                aria-label = "open drawer"
                onClick = {this.handleDrawerOpen}
                className = {classNames(classes.menuButton, open && classes.hide)}
              >
                <MenuIcon />
              </IconButton>
              <Typography variant = "title" color = "inherit" noWrap>
                Persistent drawer
              </Typography>
            </Toolbar>
          </AppBar>
          {before}
          <main
            className = {classNames(classes.content, classes[`content-${anchor}`], {
              [classes.contentShift]: open,
              [classes[`contentShift-${anchor}`]]: open,
            })}
          >
            <div className = {classes.drawerHeader} />
            <KeyboardListener />
            <SceneCanvas />
          </main>
          {after}
        </div>
      </div>
    );
  }
}

export default withStyles(styles, { withTheme: true })(Header);

Левая панель инструментов работает правильно

Правая панель инструментов ломается

Желаемая функция