Uncaught Invariant Violation: Invalid hook call. Problem in React Class Implementation

I was implementing a React Class for Material UI Tabs. I essentially took the example of tabs from the material ui website and converted into a class compatible format. The example on their website is below:

import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  function handleChange(event, newValue) {
    setValue(newValue);
  }

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Tabs value={value} onChange={handleChange}>
          <Tab label="Item One" />
          <Tab label="Item Two" />
          <Tab label="Item Three" />
        </Tabs>
      </AppBar>
      {value === 0 && <TabContainer>Item One</TabContainer>}
      {value === 1 && <TabContainer>Item Two</TabContainer>}
      {value === 2 && <TabContainer>Item Three</TabContainer>}
    </div>
  );
}

This is my translate code in the React classes style.

import React from 'react'
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import Typography from '@material-ui/core/Typography';
import MaterialTableDemo from './Table';
import Chart from './Chart';

// Define the styling of the tab component. The background of the
// displayed content is defined to be the paper color.
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

function TabContainer(props) {
  return (
    <Typography component="div" style={ { padding: 8 * 3} }>
      { props.children }
    </Typography>
  )
};

// TabContainer.propTypes = {
//   children: PropTypes.node.isRequired,
// };


class Main extends React.Component {
  constructor(props) {
    // Inherit whatever props are given to it in the tag definition
    super(props);
    // Declaration of the state variable if needed
    this.state =  {
      displayState: 0, // define the beginning state of the
      // tab component
    };
    // Declaration of some member functions, some of whic
    // return render-able HTML format code.
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(newValue) {
    this.setState( { displayState: newValue } )
  }

  // propTypes method only for debugging purposes.
  // Will check for any inconsistencies. If a prop is required to be
  // a node, but is not a node, will raise a warning/error.


  render() {
    const classes = useStyles();
    return (
      <div className={classes.root}>
        <AppBar position="static" >
          <Tabs value={this.state.displayState} onChange={this.handleChange}>
            <Tab label="Chart" />
            <Tab label="Table" />
          </Tabs>
        </AppBar>
        {this.state.displayState === 0 && <TabContainer> <Chart/> </TabContainer>}
        {this.state.displayState === 1 && <TabContainer> <MaterialTableDemo/> </TabContainer>}
      </div>
    );
  }
}
export default Main;

I want this to run and show me a tab with the desired contents inside. and are just dummy components displaying text for now.

The current error is

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See [website deleted] for tips about how to debug and fix this problem.

Answer

The error happens because useStyles() that have makeStyles wich is a react-hook and you can’t use react-hooks in class components. And as you can see in the example, it’s using functional components.

render() {
    const classes = useStyles(); // here is a react-hook that can't be used in class components
    return (