En un desafío de reacción en el que debería crear una tarjeta que necesita generar una cantidad X de números, donde X es la entrada de un usuario. Así que creé una función llamada "getRandomNum" para generar un número aleatorio dentro de un rango y verificar si el número ya está en la matriz, si es así, se generará otro número. Luego, creé otra función llamada "generateNumbers" para crear una matriz de tamaño de entrada del usuario, llamada arrayNumbers, y luego usé el método .map() usando "getRandomNum" como devolución de llamada, para insertar los números aleatorios no repetidos en la matriz, luego está el problema, la matriz sigue siendo la misma que antes del método .map(). Vea el código a continuación, por favor:

 import './Megasena.css' import { useState } from 'react' const getRandomNum = (minParam, maxParam, array) => { let min = Math.ceil(minParam) let max = Math.floor(maxParam) let numGerado = parseInt(Math.floor(Math.random() * (max-min+1)) + min) return array.includes(numGerado) ? getRandomNum(minParam, maxParam, array) : numGerado } const generateNumbers = amountOfNumbers => { let arrayNumbers = Array(amountOfNumbers).fill(0) arrayNumbers.map(_ => getRandomNum(1, 99, arrayNumbers)) if (amountOfNumbers <= 40) { return (arrayNumbers.map(num => { return ( <li key={num} className="numberItem">{num}</li> ) }) )} else { return (<p>A quantidade máxima de itens é 40!</p>) } } export default props => { const [numberOfItens, setNumberOfItens] = useState(0) return ( <div className="megasenaComp"> <div className="numbersArea"> <ul className="numbersList">{generateNumbers(numberOfItens)}</ul> </div> <div className="inputArea"> <label htmlFor="inputNumItens">Quantidade de Números:</label> <input id="inputNumItens" type="text" onChange={e=> {setNumberOfItens(+e.target.value)}} /> </div> </div> ) }