Код Material Ui отлично работает в codepen, но не в VSCODE?

Я использую Material-UI для создания «Материальных вкладок» в моем проекте ReactJS, этот код работает правильно в SANDBOX, но не в моем VS CODE. Что я должен делать?

Я проверил установку Node, проверил и установил все версии зависимостей из NPM. Я также проверил это. Проверь это, но я не мог этого понять.

import React from "react";
import PropTypes from "prop-types";
import SwipeableViews from "react-swipeable-views";
import { makeStyles } from "@material-ui/core/styles";
import { withStyles } from "@material-ui/styles";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Typography from "@material-ui/core/Typography";
function TabContainer({ children, dir }) {
  return (
    <Typography component = "div" dir = {dir} style = {{ padding: 8 * 3 }}>
      {children}
    </Typography>
  );
}
const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: 500
  }
}));

class Feature extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
  handleChangeEvent() {
    this.state.value === 0
      ? this.setState({ value: 1 })
      : this.setState({ value: 0 });
  }
  render() {
    const classes = this.props;
    const theme = this.props;
    return (
      <div className = {classes.root}>
        <Tabs
          value = {this.state.value}
          onChange = {this.handleChangeEvent.bind(this)}
          indicatorColor = "primary"
          textColor = "primary"
        >
          <Tab label = "A" />
          <Tab label = "B" />
        </Tabs>
        <SwipeableViews
          axis = {theme.direction === "rtl" ? "x-reverse" : "x"}
          index = {this.state.value}
        >
          <TabContainer dir = {theme.direction}>Item One</TabContainer>
          <TabContainer dir = {theme.direction}>Item Two</TabContainer>
        </SwipeableViews>
      </div>
    );
  }
}
Feature.propTypes = {
  classes: PropTypes.object.isRequired
};
export default withStyles(useStyles)(Feature);

А мой пакет.json выглядит так

  "dependencies": {
    "@material-ui/core": "^3.9.2",
    "@material-ui/docs": "^3.0.0-alpha.9",
    "@material-ui/styles": "^4.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "react-slick": "^0.23.2",
    "react-swipeable-views": "^0.13.3",
    "redux": "^4.0.1",
    "styled-components": "^4.2.0"
  }

Я ожидаю результат, указанный ПЕСОЧНИЦА, но вместо этого получил эту ошибку

TypeError: Object(...) is not a function
const useStyles = makeStyles(theme => ({
  root: {
    backgroundColor: theme.palette.background.paper,
    width: 500
  }
}));

в приведенном выше коде.