title: I am getting "Invalid hook call" error after using useState in my project
body: <p>I am pretty new to React and I am trying to implement the switching tabs in react using Material ui. 
  Any help will be appreciated.
  This is the error I am getting</p>
  
  <p>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</p>
  
  <p>I have already tried updating react and react-dom using this:</p>
  
  <pre><code>npx create-react-app newhook and then yarn add react@next and yarn add react-dom@next 
  </code></pre>
  
  <p>This is where I have user useState</p>
  
  <pre><code>     render() {
          const { classes, theme } = this.props;
          const [value, setValue] = React.useState(0);
          return (some code..)
      } 
  </code></pre>
  
  <p>This is my package.json file</p>
  
  <pre><code>{
    "name": "admin-jobseeker",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@material-ui/core": "^4.2.0",
      "@material-ui/icons": "^4.2.1",
      "node-sass": "^4.12.0",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-scripts": "3.0.1",
      "react-swipeable-views": "^0.13.3"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    }
  }
  </code></pre>