嗨，我是react.js的新手，我正在研究useState钩子，我有这个错误，请提供任何解决方案

Question

React Hook"useState"在函数"app"中调用，该函数既不是React函数组件，也不是自定义的React Hoo克函数React Hook/rules of hooks

import React, {useState} from 'react';
import logo from './logo.svg'
import Person from './Person/Person';
import './App.css';

const app = props =>{
const [Personstat, setPersonstate]= useState({
persons : [
{name:"Amir", age:"25"},
{name:"Amir Yousaf", age:"22225"},
{name:"Amir Yousaf Maher", age:"25"}
]
});
const switchNameHandler = () =>{
//alert('hello Listener');
setPersonstate( {
persons : [
{name:"Qasin", age:"23"},
{name:"Qasin Yousaf", age:"22"},
{name:"Qasin Yousaf Maher", age:"215"}
]
})};
return (
<div className="App">
<h1>Hello  I am trying to learn js </h1>
<Person name={Personstat.persons[0].name} 
age={Personstat.persons[0].age}/>
<Person name={Personstat.persons[1].name} 
age={Personstat.persons[1].age}>I am try my best for learning</Person>
<Person name={Personstat.persons[2].name} 
age={Personstat.persons[1].age}/>
<button onClick={switchNameHandler}>Switch Name</button>
</div>
);
}
export default app;