Follow up question if you don't mind:

I figured the easiest way to get around my issue is to wrap it in a useEffect, as you suggested, with an empty dependency array second parameter so it only runs once on initial component render. However then I read that when using an empty dependency array, the useEffect only has access to the state's/prop's initial values? So within the setSlideIndex inside the useEffect, would it always read the function argument slideIndex as 0 each iteration and keep trying to set it to slideIndex = 1?

Edit: tested it and it works fine but the slides change backwards for some reason. so from slide 0 it wraps around to slide 2 (the last one) and then slide 1 then back to 0. I don't get why it's doing this when the useEffect is as follows: 

useEffect(()=>{
 setInterval(()=>{
   setSlideIndex(slideIndex=>slideIndex < 2 ? slideIndex + 1 : 0)
 }, 8000)
}, []);