A weird error occurring when trying to implement useEffect : <p>I am trying to use useEffect inside of my cockpit function that returns a couple of elements, but I get this weird error saying that 
"Line 6:  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>But surely my cockpit component is a function?</p>

<pre><code>import React, { useEffect } from 'react'

import classes from './Cockpit.css'

const cockpit = (props) =&gt; {
  useEffect(() =&gt; {
    console.log('I work!')
  })

  const assignedClasses = []
  let btnClass = ''
  if (props.showPersons) {
    btnClass = classes.Red;
  }

  if (props.persons.length &lt;= 2) {
    assignedClasses.push(classes.red)
  }
  if (props.persons.length &lt;= 1) {
    assignedClasses.push(classes.bold)
  }

  return (
    &lt;div className={classes.Cockpit}&gt;
      &lt;h1&gt;{props.title}&lt;/h1&gt;
      &lt;p className={assignedClasses.join(' ')}&gt;HELLO, HELLO!&lt;/p&gt;
      &lt;button
        className={btnClass}
        onClick={props.clicked}&gt;Click me!&lt;/button&gt;
    &lt;/div&gt;
  )
}


export default cockpit
</code></pre>
