Как динамически заполнять разные пути SVG?

Question

У меня такой тип работы

<svg>
  <path>
  <path>
  <path>
  // lots more paths in here
</svg>

useLayoutEffect(() => {
    const interval = setInterval(() => {
        setCount((count) => count + 1)
        addAnimation()
    }, 2000)
    return () => {
        clearInterval(interval)
    }
}, [count])

const addAnimation = () => {
    if (count < 200) {
        const svg = document.querySelector('svg')
        let anim = document.createElementNS('http://www.w3.org/2000/svg', 'animate')
        anim.setAttribute('begin', '0s')
        anim.setAttribute('from', '#F2F4F9')
        anim.setAttribute('to', '#ACE1DE')
        anim.setAttribute('fill', 'freeze')
        anim.setAttribute('dur', '1.5s')
        anim.setAttribute('repeatCount', 1)
        anim.setAttribute('attributeName', 'fill')


        svg.children[count].appendChild(anim)
    }
}

так что я делаю каждые 2 секунды, я вызываю свою функцию и передаю новый счетчик, он делает это для первого, но каждый последующий не t заполняется

что странно, если я выхожу из системы: svg.children[count].appendChild(anim) и проверяю DOM, он показывает добавленную вещь. что я делаю не так?