Estoy tratando de hacer un control deslizante de imagen que le brinde nuevas imágenes cada vez que hace clic. Estoy luchando por entender cómo hacer que este código sea dinámico para que actualice la matriz que se ocupa de los índices tantas veces como el número que le paso a la función (en este caso, 3)

 const handleIncrement = () => { setIndex((prevIndex) => [ prevIndex[prevIndex.length - 1] + 1, prevIndex[prevIndex.length - 1] + 2, prevIndex[prevIndex.length - 1] + 3, ]); };

Este es el codigo completo

 function useImageSlider(range: number = 3, length: number, steps: number = 1) { const [index, setIndex] = useState<number[]>(Array.from(Array(range).keys())); const handleDecrement = () => { setIndex((prevIndex) => [ prevIndex[prevIndex.length - 1] - 1, prevIndex[prevIndex.length - 1] - 2, prevIndex[prevIndex.length - 1] - 3, ]); }; const handleIncrement = () => { index[index.length - 1] + steps + 1 >= length && setIndex((prevState) => [...prevState, -1]); setIndex((prevIndex) => [ prevIndex[prevIndex.length - 1] + 1, prevIndex[prevIndex.length - 1] + 2, prevIndex[prevIndex.length - 1] + 3, ]); }; return { length, steps, handleIncrement, handleDecrement, index }; } export default useImageSlider;