title: Error using useEffect in react functional component
body: <p>I am learning to use react hooks to manage state but I get the error saying 
    Line 5:3:  React Hook "useEffect" is called in function "cockpit" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks</p>
  
  <p>here is my code</p>
  
  <pre><code>import React, {useEffect} from "react";
  import classes from "./Cockpit.module.css";
  
  const cockpit = (props) =&gt; {
    useEffect(() =&gt; {
      console.log('Cockpit js useEffect');
  
    });
  
    const assiginedClasses = [];
    let btnClass = "";
    if (props.showPersons) {
      btnClass = classes.Red;
    }
  
    if (props.persons.length &lt;= 2) {
      assiginedClasses.push(classes.red);
    }
  
    if (props.persons.length &lt;= 1) {
      assiginedClasses.push(classes.bold);
    }
    return (
      &lt;div className={classes.Cockpit}&gt;
        &lt;h1&gt;Hi I'm a React App&lt;/h1&gt;
        &lt;p className={assiginedClasses.join(" ")}&gt;This is really Working!&lt;/p&gt;
        &lt;button className={btnClass} onClick={props.clicked}&gt;
          Toggle Name
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default cockpit;
  </code></pre>