react-spring -leave event not working as expected

Question

enter image description hereenter image description here Please help to make it animation as attached image, I tried with @react-spring/web library - useTransition leave config seems it's not working as expected.

My code:

const MediaRenderDots = ({ item, index, currentSlide, photos }) => {
  const activeDot = currentSlide === index;
  const lastDotSmall = photos.length >= 4 && index > currentSlide + 2;
  const hideDots =
    photos.length >= 4 &&
    (index > currentSlide + 3 || index < currentSlide - 3);
  const firstDotSmall = photos.length >= 4 && index < currentSlide - 2;

  const renderDots = () => {
    if (lastDotSmall || firstDotSmall) {
      return hideDots ? (
        <></>
      ) : (
        <CounterSmallDotIcon
          key={`small-${index}-${item.path}`}
          fillCircle={item.id ? colors.gray["500"] : "#D06369"}
        />
      );
    } else if (item.id) {
      return (
        <CounterDotIcon
          key={`public-${index}-${item.id}`}
          fillColor={activeDot ? "white" : colors.gray["500"]}
        />
      );
    } else {
      return (
        <CounterDotIcon
          key={`private-${index}-${item.path}`}
          isActivePrivate={activeDot}
          fillColor={"#D06369"}
        />
      );
    }
  };

  const transRef = useSpringRef();
  const transitions = useTransition(currentSlide, {
    ref: transRef,
    keys: currentSlide,
    from: {
      transform: `translate3d(100%,0,0) scale(0.8)`,
    },
    enter: {
      transform: "translate3d(0%,0,0) scale(1)",
    },
    leave: {
      transform: `scale(3)`,
    },
    config: { duration: 600 },
  });

  useEffect(() => {
    transRef.start();
  }, [currentSlide]);

  return transitions((style) => {
    return (
      <animated.div
        style={{
          ...style,
          display: "inherit",
          height: 6,
          alignItems: "center",
        }}
      >
        {renderDots()}
      </animated.div>
    );
  });
};
...

on leave extra dots appearing, only line should connect to two dots of slider during switching the dots. Is there any other library or solution where we can achieve above animation?