How To Create Animated Numbers In React.js

const { number } = useSpring({
    from: { number: 0 },
    number: 618,
  });
   return (
    <>
      <animated.div
        style={whitelistedAnimation}
        className="text-center text-4xl text-peri leading-loose tracking-wider w-[30vw]"
      >
        <span className="uppercase">
          Whitelistovanih <span className="text-cyan-500">igrača</span>{" "}
        </span>
        <br />
        <span className="text-5xl px-3 border rounded-lg">
          {number.to((n) => n.toFixed(0))}
        </span>
      </animated.div>
      <div ref={triggerRef} />
    </>
  );

As shown in your youtube video, with the Title same as the Title of this inquiry, I have set up my code using react spring, in order to animate from 0 to 618. The problem is that I get an error that “Objects cannot be React children”.

I was wondering if something changed in the library? If yes, could you help me achieve the same thing with an updated code please?