I'm posting for the first time. The question format may be a mess, but I look forward to your kind cooperation.

[My ISSUE]
Currently, the website is being produced using Next.js. A total of six slide functions were created, and there is one problem. A separate laptop and mobile environment were created, but when the laptop reduces the browser to mobile or vice versa, a problem occurs on the slide.

I don't know if this is called an overlapping phenomenon, the between each slide image appears like each picture. Only One picture should be in the center under those slide dots, but two are displayed.

I've thought of a solution, but I don't have a clue.

//My Slide Component

//the id value was given from zero. (total of six pictures)
const totalSlide = 5; 

const slideRef = useRef();
const [currentSlide, setCurrentSlide] = useState(0);

const prevEvent = () => {
 if (currentSlide === 0) setCurrentSlide(totalSlides);
   else setCurrentSlide(currentSlide - 1);
 };

const nextEvent = () => {
 if (currentSlide >= totalSlides) setCurrentSlide(0);
   else setCurrentSlide(currentSlide + 1);
 };

useEffect(() => {
  slideRef.current.style.transition = 'all 0.4s ease-out';

  //The mobile environment was set to 1024px or less.
  if (window.innerWidth >= 1024) {
      slideRef.current.style.transform = `translateX(-${currentSlide * 650}px)`;
    } else {
      slideRef.current.style.transform = `translateX(-${currentSlide * 360}px)`;
    }
}, [currentSlide]);

[My wish result]
Even if there is a change in browser size, we want only one picture to appear without overlapping slides. Even if the margin between images is reached as shown in the picture by overlapping, we want to fix it by returning to its place or initializing to zero according to the id value displayed by the slide dots.