En este código, cuando hago clic en el botón Eliminar, aparece este error:

App.js: 9 TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'mapa')

Me di cuenta de que el motivo es que debo actualizar el estado del número seleccionado antes de actualizar el estado de los números. Entiendo que es imposible hacerlo solo con useState. Me di cuenta de que podía hacerlo con useReducer. ¿Tengo razón o hay otra forma de hacerlo sin useReducer?

 import { useState } from "react"; const App = () => { const [numbers, setNumbers] = useState([1, 2, 3, 4, 5, 6]); const [selectedNumber, setselectedNumber] = useState(1); return ( <div> <ul> {numbers.map((number) => { return ( <li key={number} onClick={() => setselectedNumber(number)} style={ number === selectedNumber ? { color: "blue" } : { color: "red" } } > {number} </li> ); })} </ul> <div> {selectedNumber} <button onClick={() => setNumbers((prev) => { prev.filter((number) => number !== selectedNumber); }) } > delete </button> </div> </div> ); }; export default App;