Multiple instances of AnimatedNumber on one pages causes weird issues

[philmetzger]

I have multiple instances of the counter in one component.

e.g.

  const [counterValue, setCounterValue] = useState(counter.count);

  const handleCount = async (increment: boolean) => {
    const newCount = increment ? counterValue + 1 : counterValue - 1;
    if (newCount >= 0) {
      setCounterValue(newCount);
    }
  };
<AnimatedNumber
        className='text-dark dark:text-paperdark flex items-center justify-center'
        fontStyle={{ fontSize: 60 }}
        animateToNumber={counterValue}
        includeComma={true}
      />
      <AnimatedNumber
        className='text-dark dark:text-paperdark flex items-center justify-center'
        fontStyle={{ fontSize: 60 }}
        animateToNumber={22}
        includeComma={true}
      />

However when I click on a button to increment the count, then all counts of other counters go to 0 Any ideas?

[brennerm]

Hey @philmetzger , I'm having the same issue. Would be glad to hear what the solution was.