React-Spring - springs with delay get accumulated if the browser tab becomes inactive

Question

I'm using react-spring for animating my website. I'm using useSprings to create multiple springs and add staggered delay for each spring using the index (check below). Everything works fine as expected.

But if I switch to a different tab and come back to my web app, all the delays get expired and all springs start at the same time. How to solve this?

const [circleSprings] = useSprings(dropCount, (i)=> {
    const xPos = Math.random() * w;
    return {
    from: { x: xPos, y: -20 },
    to: { x: xPos, y: h+20 },
    config: {
        duration: 1000,
        easing: easings.easeInQuart,
    },
    reset: true,
    delay: i * 500, // delay is staggered here
    loop: true,

}},[]);