I'm trying to create an array of non-repeating random values. The intention is to generate this array and map it to return random images but have them not repeat in a slide show. The current issue is that it only checks with conditionals, how could I make this more dynamic? I have tried recursion and it maxed out the call stack.
//arr =[img_src_0, img_src_1, img_src_2,...img_src_41]
 export default function randomTechList(arr){
  const max = arr.length-1
  let array = []
  for(let i = 0; i <=max; i++){
    let randomIdx = Math.floor(Math.random() * max) + 1
    if(array.includes(randomIdx)){
      let newRandom = Math.floor(Math.random() * max) + 1
      if(array.includes(randomIdx)){
        let newRandom = Math.floor(Math.random() * max) + 1
        if(array.includes(randomIdx)){
          //stoped here
        }else{
          array.push(newRandom)
        }
      }else{
        array.push(newRandom)
      }
    }else{
      array.push(randomIdx)
    }
  }
  console.log(array)
  return array
}
React.JS file
import Carousel from 'react-bootstrap/Carousel';
import { techList } from './img/techList.js';
import randomTechList from './globalFunctions/randomTechList.js';
export default function SlideShow() {
  let randomIdx = randomTechList(techList) 
  return(
<div className='openingCarusel'>
  <Carousel>
  {randomIdx.map((item, idx)=>{
        return(
          <Carousel.Item interval={50} className="imgContainer" key={idx}>
          <img
            className="d-block w-10 openingIMG"
            src={techList[item]}
            alt={`slide_${idx}`}
            id={`slide_img_${idx}`}
            />
        </Carousel.Item>
        )
    })}
  </Carousel>
</div>
  );
}
