I have a problem calling with my carousel codes, it keeps keeping variables for other conditions

I have tried so many method to stop this error but nothing seems to work, here is a link to my codepen: https://codepen.io/T_manuel/pen/PoKMYVx

when the page loads, I call the function but when I resize the page, Javascript seems to do the new logic also with previous logics...

const mediaQuery_1 = '(max-width:601px)';

const mediaQueryList1 = window.matchMedia(mediaQuery_1);

/carousel parent div -- to dynamically load the carousel items

// define media queries

const mediaQuery_1 = '(max-width:601px)';

// add matchMedia

const mediaQueryList1 = window.matchMedia(mediaQuery_1);

if (mediaQueryList1.matches) {
  carouselFunc(); // dynamic loaded pictures
  LeftArrow.classList.add("displayNone");
  let indexOfImg = 0; //to be accessed for the carousel, index for first image
  let endofImg = 3; //carousel use, index for next image to be displayed
  otherCarouselLogic(indexOfImg, endofImg);
  if (carouselPics.length > 3) {
    for (i = 3; i < carouselPics.length; i++) {
      carouselPics[i].classList.add("displayNone");
    }
    RightArrow.classList.remove("displayNone");
  } else {
    RightArrow.classList.add("displayNone");
  }
}

else {

  carouselFunc(); //dynamic loaded Pictures
  LeftArrow.classList.add("displayNone");
  let IndexOfImg = 0; //to be accessed for the carousel, index for first image
  let EndOfImg = 4; //carousel use, index for next image to be displayed
  otherCarouselLogic(IndexOfImg, EndOfImg);
  if (carouselPics.length > 3) {
    for (i = 4; i < carouselPics.length; i++) {
      carouselPics[i].classList.add("displayNone");
    }
  }
  // not to display carousel arrows if pics can be showed at once
  if (carouselPics.length <= 4) {
    RightArrow.classList.add("displayNone");
  }
}

// add event Listener

mediaQueryList1.addEventListener("change", function carouselUx(event) {

  if(event.matches) {
    
    document.getElementById("carous").innerHTML = "";
    carouselFunc(); //contains dynamic loaded pictures
    LeftArrow.classList.add("displayNone");
    let indexOfImg = 0; //to be accessed for the carousel, index for first image
    let endofImg = 3; //carousel use, index for next image to be displayed
    otherCarouselLogic(indexOfImg, endofImg);
    if (carouselPics.length > 3) {
      for (i = 3; i < carouselPics.length; i++) {
        carouselPics[i].classList.add("displayNone");
      }
      RightArrow.classList.remove("displayNone");
    } else {
      RightArrow.classList.add("displayNone");
    }
  }
  
   else {

    document.getElementById("carous").innerHTML = "";
    carouselFunc();
    LeftArrow.classList.add("displayNone");
    let IndexOfImg = 0; //to be accessed for the carousel, index for first image
    let EndOfImg = 4; //carousel use, index for next image to be displayed
    otherCarouselLogic(IndexOfImg, EndOfImg);
    if (carouselPics.length > 3) {
      for (i = 4; i < carouselPics.length; i++) {
        carouselPics[i].classList.add("displayNone");
      }
    }
    // not to display carousel arrows if pics can be showed at once
    if (carouselPics.length <= 4) {
      RightArrow.classList.add("displayNone");
    }
  }
})

function otherCarouselLogic(cpF, newImg) {

  /* carousel code ends here */

  carouselBtn.forEach(function (btns) {
    btns.addEventListener("click", function (e) {
      clickedArrow = e.currentTarget.id;

      if (clickedArrow === "right") {
        console.log(newImg);
        carouselPics[cpF].classList.add("displayNone");
        carouselPics[newImg].classList.remove("displayNone");
        LeftArrow.classList.remove("displayNone");
        cpF += 1;
        newImg += 1;
      }

      if (clickedArrow === "left") {
        cpF -= 1;
        newImg -= 1;
        carouselPics[newImg].classList.add("displayNone");
        carouselPics[cpF].classList.remove("displayNone");
        RightArrow.classList.remove("displayNone");
        console.log(newImg);
      }

      // ux purpose, when we get to the last pics in the carousel, the right arrow is hidden
      diffR = carouselPics.length - newImg;

      // diffL
      if (diffR === 0) {
        RightArrow.classList.add("displayNone");
      }

      if (cpF === 0) {
        LeftArrow.classList.add("displayNone");
      }
    });
  });

  /* carousel code ends here */
}

upon load,

newImg is set to 4 and all seems to work

after resize, it is set to either 3 or 4 depending on the logic, but instead of incrementing that value alone, it gives value for the load and also for the resize.