useSpring/useSpring with object config doesn't start automatically

[hadikman]

Hi
I have a problem with auto start animation defined with object config (no function config) in useSpring/useSprings.
This example works perfect but doesn't start animation for first item when component mounted but when user scroll the page, and when other items are visible (check visibility with intersectionObserver) everything will work perfect, even the first item animation will start to work when user scroll back to top of the page (meet the first item).
This's an example of a defined useSprings:

const styles = useSprings(
    anchors.length,
    anchors.map((_, idx) => ({
      backgroundSize: active === idx ? '100% 5%' : '100% 0%', // active value control with intsersectionObserver
      to:
        active === idx
          ? [{ backgroundSize: '100% 100%' }, { backgroundSize: '100% 5%' }]
          : { backgroundSize: '100% 0%' },
      loop: active === idx,
    })),
  )

A solution I found is using useIsReadyWindow. This hook returns true when window !== undefind.
When the window object is ready, the component will refresh and then the first item for first time will animate.

I have this problem with any type of useSpring/useSprings for single/multiple item with config object. The defined animation won't start for first time until a handler like useIsReadyWindow hook refresh the component or user have interaction with other elements in the page to start animation.

All packages in this project:

"dependencies": {
    "@react-spring/parallax": "^9.7.3",
    "@react-spring/web": "^9.7.3",
    "@react-three/drei": "^9.106.0",
    "@react-three/fiber": "^8.16.8",
    "@tanstack/react-query": "^5.24.6",
    "@use-gesture/react": "^10.3.1",
    "clsx": "^2.1.0",
    "embla-carousel-react": "^8.0.0",
    "lucide-react": "^0.331.0",
    "mapbox-gl": "^3.3.0",
    "mongodb": "^6.3.0",
    "next": "14.2.3",
    "next-auth": "5.0.0-beta.16",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-map-gl": "^7.1.7",
    "sharp": "^0.33.2",
    "three": "^0.165.0",
    "use-debounce": "^10.0.0",
    "uuid": "^10.0.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@tanstack/eslint-plugin-query": "^5.20.1",
    "@tanstack/react-query-devtools": "^5.24.6",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.56.0",
    "eslint-config-next": "14.2.3",
    "eslint-config-prettier": "^9.1.0",
    "postcss": "^8.4.35",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.11",
    "tailwindcss": "^3.4.1"
  }

Thank you in advance 🌹