title: React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function
body: <p>I'm trying to use react hooks for a simple problem</p>
  
  <pre><code>const [personState,setPersonState] = useState({ DefinedObject });
  </code></pre>
  
  <p>with following dependencies.</p>
  
  <pre><code>"dependencies": {
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-scripts": "3.0.0"
  }
  </code></pre>
  
  <p>but I'm still getting the following error:</p>
  
  <blockquote>
    <p>./src/App.js </p>
    
    <p>Line 7:<br>
    React Hook "useState" is called in function
    "app" which is neither a React function component or a custom React
    Hook function  react-hooks/rules-of-hooks</p>
    
    <p>Line 39:<br>
    'state' is not defined<br>
    no-undef</p>
    
    <p>Search for the keywords to learn more about each error.</p>
  </blockquote>
  
  <p>Component code is below:</p>
  
  <pre><code>import React, {useState} from 'react'; 
  import './App.css'; 
  import Person from './Person/Person'; 
  
  const app = props =&gt; { 
      const [personState, setPersonSate] = useState({ person:[ {name:'bishnu',age:'32'}, {name:'rasmi',age:'27'}, {name:'fretbox',age:'4'} ], }); 
      return (
          &lt;div className="App"&gt; 
              &lt;h2&gt;This is react&lt;/h2&gt; 
              &lt;Person name={personState.person[1].name} age="27"&gt;&lt;/Person&gt;
              &lt;Person name={personState.person[2].name} age="4"&gt;&lt;/Person&gt; 
          &lt;/div&gt; ); 
      };
      export default app;
  </code></pre>
  
  <p>Person component</p>
  
  <pre><code>import React from 'react'; 
  
  const person = props =&gt; { 
      return( 
          &lt;div&gt;
              &lt;h3&gt;i am {props.name}&lt;/h3&gt;
              &lt;p&gt;i am {props.age} years old&lt;/p&gt;
              &lt;p&gt;{props.children}&lt;/p&gt;
          &lt;/div&gt; 
      )
  };
  
  export default person; 
  </code></pre>