ImageSlider problems

Question

I'm working on creating a ImageSlider but my images are shown as following: enter image description here I know that is something wrong in the slider elements style but don't get it. I'm new to implementing sliders on web pages. If someone have an idea let me know, thanks!

Here is my code:

const slideStyles = {
  width: "100%",
  height: "100%",
  borderRadius: "2rem",
  backgroundSize: "cover",
  backgroundPosition: "center",
};

const rightArrowStyles = {
  position: "absolute",
  top: "50%",
  transform: "translate(0, -50%)",
  right: "32px",
  fontSize: "45px",
  color: "#fff",
  zIndex: 1,
  cursor: "pointer",
};

const leftArrowStyles = {
  position: "absolute",
  top: "50%",
  transform: "translate(0, -50%)",
  left: "32px",
  fontSize: "45px",
  color: "#fff",
  zIndex: 1,
  cursor: "pointer",
};

const sliderStyles = {
  position: "relative",
  height: "100%",
};

const dotsContainerStyles = {
  display: "flex",
  justifyContent: "center",
};

const dotStyle = {
  margin: "0 0.2rem",
  cursor: "pointer",
  fontSize: "1rem",
};

const slidesContainerStyles = {
  display: "flex",
  height: "100%",
  transition: "transform ease-out 0.3s",
};

const slidesContainerOverflowStyles = {
  width: "",
  overflow: "hidden",
  height: "100%",
};

const ImageSlider = ({ slides, parentWidth }) => {
  const [timer, setTimer] = useState(null);
  const [currentIndex, setCurrentIndex] = useState(0);

  const goToPrevious = () => {
    setCurrentIndex(
      (currentIndex) =>
        (((currentIndex - 1) % slides.length) + slides.length) % slides.length
    );
  };
  const goToNext = () => {
    setCurrentIndex((currentIndex) => (currentIndex + 1) % slides.length);
  };
  const goToSlide = (slideIndex) => {
    setCurrentIndex(slideIndex);
  };

  const getSlideStylesWithBackground = (slideIndex) => ({
    ...slideStyles,
    width: `${parentWidth}px`,
    backgroundImage: `url(${slides[slideIndex].url})`,
  });
  const getSlidesContainerStylesWithWidth = () => ({
    ...slidesContainerStyles,
    width: `${parentWidth * slides.length}px`,
    transform: `translateX(${-(
      Math.min(currentIndex, slides.length - 2) * parentWidth
    )}px)`,
  });

  useEffect(() => {
    setTimer(setInterval(goToNext, 2000));

    return () => clearInterval(timer);
  }, [slides]);

  return (
    <div style={sliderStyles}>
      <div>
        <div onClick={goToPrevious} style={leftArrowStyles}>
          ❰
        </div>
        <div onClick={goToNext} style={rightArrowStyles}>
          ❱
        </div>
      </div>
      {/* here to modify */}
      <div style={slidesContainerOverflowStyles}>
        <div style={getSlidesContainerStylesWithWidth()}>
          {slides.map((_, slideIndex) => (
            <div
              key={slideIndex}
              style={getSlideStylesWithBackground(slideIndex)}
            />
          ))}
        </div>
      </div>
      {/* stop here */}
      <div style={dotsContainerStyles}>
        {slides.map((_, slideIndex) => (
          <div
            key={slideIndex}
            style={dotStyle}
            onClick={() => goToSlide(slideIndex)}
          >
            ●
          </div>
        ))}
      </div>
    </div>
  );
};

export default ImageSlider;

I tried to modify the dimensions of the div that holds the slider but it didn't worked.