title: React Hook "React.useEffect" is called in function "selectmenu" which is neither a React function component or a custom React Hook function
body: <p>Problem: React Hook &quot;React.useEffect&quot; is called in function &quot;selectmenu&quot; which is neither a React function component or a custom React Hook function.<br><br>
  Target: I want to Mount Component('component DidMount/WillUnmount) (using useEffect()) only when I click on a button, rather than, mounting while the file (or whole Component) is being loaded.
  <br><br>
  Actual Goal: I want to select(or highlight) a file (custom ) on click. But when the user clicks outside the dimensions of the file (), then the selected file should get deselected (remove highlight).</p>
  <pre><code>export default function Academics() {
    let [ ismenuselected, setmenuselection] = useState(0)
  
    const selectmenu = () =&gt; {
  
      console.log(&quot;Menu to Select&quot;)
  
      React.useEffect(() =&gt; {
        console.log('Component DidMount/WillUnmount')
  
        return () =&gt; {
           console.log('Component Unmounted')
        }
      }, [isfolderselected]);
    }
  
    return (
            &lt;div onClick={selectmenu}&gt;&lt;/div&gt;
    )
  }
  </code></pre>
  <p>Note:</p>
  <ol>
  <li>I've tried with the UPPER case of SelectFolder <a href="https://stackoverflow.com/questions/56462812/react-hook-usestate-is-called-in-function-setresults-which-is-neither-a-reac">#56462812</a>. <code>Error: Invalid hook call. Hooks can only be called inside of the body of a function component.</code></li>
  <li>I want to try something like <a href="https://reactjs.org/docs/accessibility.html#mouse-and-pointer-events" rel="nofollow noreferrer">this</a>. But with a click of a button (useEffect() should invoke onClick event).</li>
  </ol>