Добрый вечер, может кто подскажет, я сделал цикличный слайдер но

при переходе от последнего к первому слайду он движется в другую сторону и перелистывает все от 3 до 1 на видео будет видно. Я думал что map поможет в этом, но это ничего не дало, есть у кого-то идеи?
export default function Slider () {
const sliderArr = [
<img
src={SlideImg1} alt="slider"
key={SlideImg1} style={{height: "100%"}}
/>,
<img
src={SlideImg2} alt="slider2"
key={SlideImg2} style={{height: "100%"}}
/>,
<img
src={SlideImg3} alt="slider3"
key={SlideImg3} style={{height: "100%"}}
/>
]
const [x, setX] = useState(0)
useEffect(() => {
const id = setInterval(() => {
if (x === -200) {
setX(0)
} else {
setX(x => x - 100)
}
}, 4000)
return () => clearInterval(id)
}, [x])

return (
<div className="custom-slider">
{
sliderArr.map((item, index) => {
return (
<div
key={index}
className="custom-slide"
style={{transform: `translateX(${x}%)`}}
>
{item}
</div>
)
})
}
</div>
)
}

.

так а в чем проблема? ты ж сам ставишь setX(0) если x === -200 вот он и пролистывается в начало