playSegments doesn't work as described in the docs

1

Hello everyone. I am trying to get playSegments to work as it is supposed to. I want to play the first segment [77,30] 3 times and then at the end the segment [30,0]. In the docs it tells me to simple put in the segments i want to play into the function but that doesnt work at all. What does work is if i leave the function empty or put something in it doesnt really matter and then specify a segments prop on the Lottie Component. The only issue is it will play all segments and not only the ones i want. What am i missing here? This is my code.

import Lottie from "react-lottie";
import peakingCat from "../../../public/assets/animations/peakingCat.json";
import { memo, useEffect } from "react";


const defaultOptions = {
  loop: false,
  autoplay: true,
  animationData: peakingCat,
};

function PeakingCat({ lottieRef, size = 400 }) {
  useEffect(() => {
    if (!lottieRef.current) return;
    let duration = 5000;
    let timesPlayed = 0;
    console.log(lottieRef.current);
    // Wait for the segment to finish
    const animationLoop = setInterval(() => {
      // Play the second segment
      lottieRef.current.playSegments([77, 30], true);

    duration = Math.floor(Math.random() * 7 + 2) * 1000;
    ++timesPlayed;
    if (timesPlayed === 3) {
      lottieRef.current.playSegments([30, 0], true);
      clearInterval(animationLoop);
    }
  }, duration);

  return () => clearInterval(animationLoop);
}, [lottieRef]);

return (
  <Lottie
    ref={lottieRef}
    options={defaultOptions}
    height={size}
    width={size}
    isClickToPauseDisabled
    style={{
      cursor: "default",
      zIndex: "0",
    }}
    segments={[
      [77, 30],
      [30, 0],
    ]}
  />
);

}

export default memo(PeakingCat);