Estoy practicando reaccionar ahora y me enfrento a un problema en el componente de función de reacción con useState. Y no puedo eliminar uno de la lista haciendo clic en el párrafo. Por favor dime como debo hacer. No tengo problemas con setState pero quiero probar esto con componentes funcionales

 import './style.css'; import Person from './Person/Person'; const App = (props) => { const [personArray, setPersonArray] = useState({ person: [ { name: 'mg mg', age: 20 }, { name: 'justin', age: 17 }, { name: 'helen', age: 12 }, ], showPerson: false, }); const showNameHandler = () => { const doesShow = personArray.showPerson; setPersonArray({ person: [ { name: 'mg mg', age: 20 }, { name: 'justin', age: 17 }, { name: 'helen', age: 12 }, ], showPerson: !doesShow, }); }; const deletPerson = (personIndex) => { const person = [...personArray.person]; person.slice(personIndex, 1); setPersonArray({ person: person }); }; let persons = null; if (personArray.showPerson) { persons = ( <div> {personArray.person.map((pp, index) => { return ( <Person click={() => deletPerson(index)} name={pp.name} age={pp.age} /> ); })} </div> ); } return ( <div> <div className="wrapper"> <h1>Hello React</h1> {persons} <button onClick={showNameHandler}> Show Name </button> </div> </div> ); }; export default App;