Overflowing element showing in adjacent card in react-responsive-carousel

Question

I'm using react-responsive-carousel. What I need to accomplish is that I want to show half part of absolute positioned image in a carousel card. I want to hide its overflowing part when it's static but need to show the complete image while scrolling.

Currently, I'm using the hidden tailwind class because otherwise, it shows the remaining part in the adjacent card which seems like a bug in design. I tried to utilize onSwipeStart prop as well in order to remove the "hidden" class with the help of a useState hook when it's being scrolled . But it's not changing the state.

Edit: It's actually changing the state while scrolling through the mouse, but not working when it's scrolling through navigation dots. Can you please suggest any prop similar to onSwipeStart that could trigger when carousel-dot is clicked? Here is my code:

import React, { useState } from "react";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";
import "./styles.css";

const App = () => {
  const [isMoving, setIsMoving] = useState(false);
  const onSwipeStart = () => {
    setIsMoving(true);
    alert("its moving")
  };

  const onSwipeEnd = () => {
    setIsMoving(false);
  };

  const arrowStyle = {
    backgroundColor: "gray",
    width: "fit-content",
    borderRadius: "2rem",
    padding: "0.5rem",
    color: "white"
  };
  const prevArrowStyle = {
    ...arrowStyle,
    position: "absolute",
    top: "35%",
    zIndex: "50"
  };

  const nextArrowStyle = {
    ...arrowStyle,
    position: "absolute",
    top: "35%",
    right: "0"
  };

  const myArrowPrev = (onClickHandler, hasPrev, label) =>
    hasPrev && (
      <p onClick={onClickHandler} style={prevArrowStyle}>
        Previous
      </p>
    );

  const myArrowNext = (onClickHandler, hasNext, label) =>
    hasNext && (
      <p onClick={onClickHandler} style={nextArrowStyle}>
        Next
      </p>
    );

  const userIconStyle = {
    position: "absolute",
    left: "-8%",
    width: "5rem"
    // Add any other styles you want here
  };

  const boxStyle = {
    position: "relative",
    overflow: !isMoving ? "hidden" : "visible"
  };

  return (
    <>
      <Carousel
        renderArrowPrev={myArrowPrev}
        renderArrowNext={myArrowNext}
        infiniteLoop={true}
        onSwipeStart={onSwipeStart}
        onSwipeEnd={onSwipeEnd}
        swipeable={true}
      >
        <div style={boxStyle}>
          <img src="./user-circle.svg" alt="icon" style={userIconStyle}></img>
          <img
            src="./img-1.jpg"
            alt="carousel-item"
            style={{ width: "100%" }}
          ></img>
        </div>
        <div style={boxStyle}>
          <img src="./user-circle.svg" alt="icon" style={userIconStyle}></img>
          <img
            src="./img-2.jpg"
            alt="carousel-item"
            style={{ width: "100%" }}
          ></img>
        </div>
        <div style={boxStyle}>
          <img src="./user-circle.svg" alt="icon" style={userIconStyle}></img>
          <img
            src="./img-3.jpg"
            alt="carousel-item"
            style={{ width: "100%" }}
          ></img>
        </div>
      </Carousel>
      <div>{isMoving ? "its moving" : "it's not moving"}</div>
    </>
  );
};

export default App;

And this is the codesandbox example: https://codesandbox.io/s/carouseloverflow-wysl6k?file=/src/App.js:0-2468