title: Uncaught Invariant Violation: Hooks can only be called inside the body of a function component
body: <p><strong>As it says in the title I appearently cant use hooks</strong></p>
  
  <p>I know some of you will try and tell me this is a duplicate, but its not in all the questions I have seen nobody seems to ask what is the <strong>proper way to use the imported functional component</strong>
  The Component I attempt to render.</p>
  
  <pre><code>    import React from 'react';
  import { hot } from 'react-hot-loader';
  import Playground from '../playground/index';
  
  class App extends React.Component {
    render() {
      Playground();
      return (
        &lt;div&gt;
          &lt;p&gt;Hello World&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default hot(module)(App);
  </code></pre>
  
  <p>My dev Dependencies:</p>
  
  <p><em>I include them because I have seen in other answers people claim is due to the version (I have all updated react wise)</em></p>
  
  <pre><code>"devDependencies": {
      "sass-loader": "7.1.0",
      "sass": "*",
      "@babel/cli": "7.1.5",
      "@babel/core": "7.1.5",
      "@babel/plugin-proposal-class-properties": "7.1.0",
      "@babel/plugin-syntax-dynamic-import": "7.0.0",
      "@babel/preset-env": "7.1.5",
      "@babel/preset-react": "7.0.0",
      "babel-core": "7.0.0-bridge.0",
      "babel-eslint": "10.0.1",
      "babel-jest": "23.6.0",
      "babel-loader": "8.0.4",
      "babel-plugin-dynamic-import-node": "2.2.0",
      "css-loader": "1.0.1",
      "eslint": "5.12.0",
      "eslint-plugin-jsx-a11y": "6.1.2",
      "eslint-plugin-react": "7.12.3",
      "html-webpack-plugin": "3.2.0",
      "husky": "1.3.1",
      "jest": "23.6.0",
      "jest-dom": "2.1.1",
      "node-sass": "4.11.0",
      "node-sass-chokidar": "1.3.4",
      "prettier": "1.15.2",
      "pretty-quick": "1.8.0",
      "react-axe": "3.0.2",
      "react-testing-library": "5.2.3",
      "style-loader": "0.23.1",
      "webpack": "4.25.1",
      "webpack-bundle-analyzer": "3.0.3",
      "webpack-cli": "3.1.2",
      "webpack-dev-server": "3.1.10",
      "webpack-merge": "4.1.4"
    }
  </code></pre>
  
  <p>And the functional component I try to import:</p>
  
  <pre><code>import React, { useState } from 'react';
  
  export default function Playground() {
    const [text, setText] = useState('');
    const [checked, setCheck] = useState(false);
  
    return (
      &lt;section&gt;
        &lt;input type="text" value={text} onChange={e =&gt; setText(e.target.value)} /&gt;
        &lt;input
          type="checkbox"
          value={checked}
          onChange={e =&gt; setCheck(e.target.value)}
        /&gt;
        &lt;ul&gt;
          &lt;li&gt;{text}&lt;/li&gt;
          &lt;li&gt;{checked.toString()}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/section&gt;
    );
  }
  </code></pre>