title: 'useState' is not defined no-undef React
body: <p>I'm trying to use react hooks for a simple problem. I believe the solution is stupid but I don't see it.
  I Tried to see in my package.json but didn't found the solution. and I'm pretty sure that I'm declaring my state in a good way.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useEffect } from "react";
  import "./App.css";
  import Chuck from "./gettyimages-83457444-612x612.jpg";
  import axios from "axios";
  
  function App() {
    const [state, setState] = useState({
      joke: "",
    });
  
    useEffect(() =&gt; {
      fetchData();
    }, []);
  
    const fetchData = async () =&gt; {
      const result = await axios.get("https://api.chucknorris.io/jokes/random");
      console.log(result.data.value);
      setState({ ...state, joke: result.data.value });
    };
    return (
      &lt;div className="container"&gt;
        &lt;div className="row"&gt;
          &lt;div className="col-6"&gt;
            &lt;h1 className="title"&gt;Chuck API&lt;/h1&gt;
            &lt;img src={Chuck} alt="ChuckNoris" /&gt;
          &lt;/div&gt;
          &lt;div className="col-6 searchJokeCol"&gt;
            &lt;div className="card"&gt;
              &lt;div className="card-header"&gt;
                &lt;span&gt;Search for the Phrase of Chuck&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className="card-body"&gt;
                &lt;input type="text"&gt;&lt;/input&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;button className="btn btn-warning btn-lg"&gt;Just CLICK!&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;h2 className="subTitle"&gt; Here is The joke&lt;/h2&gt;
        &lt;h4&gt;{state.joke}&lt;/h4&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  
  And that's my package.json</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  "dependencies": {
      "@testing-library/jest-dom": "^4.2.4",
      "@testing-library/react": "^9.5.0",
      "@testing-library/user-event": "^7.2.1",
      "axios": "^0.20.0",
      "react": "^16.13.1",
      "react-dom": "^16.13.1",
      "react-scripts": "3.4.3",
      "react-test-renderer": "^17.0.0-rc.1"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "ej</code></pre>
  </div>
  </div>
  
  and I get this error</p>
  <blockquote>
  <p>Line 7:29:  'useState' is not defined  no-undef</p>
  </blockquote>