How to automatic increment different number in React

Question

I wanted to create an Automatic number incrementer that increments different numbers at different speed according to their size such that they all stops at same time

for example you can see here this is the desired output I am expecting how these different number stops at same time

I tried doing it using useEffect useState and setInterval but they all are stoping at a big gap

you can see my demo here

React Js code

import React from "react";
import classes from "./Numbers.module.css";

function Numbers() {
  const [counter, setCounter] = React.useState(0);
  React.useEffect(() => {
    const interval = setInterval(() => {
      if (counter < 1839) {
        setCounter(counter + 1);
      }
    }, 5);

    return () => {
      clearInterval(interval);
    };
  });
  const [counter1, setCounter1] = React.useState(0);
  React.useEffect(() => {
    const interval = setInterval(() => {
      if (counter1 < 512) {
        setCounter1(counter1 + 1);
      }
    }, 5);

    return () => {
      clearInterval(interval);
    };
  });
  const [counter2, setCounter2] = React.useState(0);
  React.useEffect(() => {
    const interval = setInterval(() => {
      if (counter2 < 729) {
        setCounter2(counter2 + 1);
      }
    }, 5);

    return () => {
      clearInterval(interval);
    };
  });
  const [counter3, setCounter3] = React.useState(0);
  React.useEffect(() => {
    const interval = setInterval(() => {
      if (counter3 < 2729) {
        setCounter3(counter3 + 1);
      }
    }, 5);

    return () => {
      clearInterval(interval);
    };
  });
  return (
    <div class={classes["number-section"]}>
      <h1 class={classes["Number-heading"]}>Numbers expose our character.</h1>
      <div class={classes["notes-books-pyq"]}>
        <div>
          <span class={`${classes["notes-number"]} ${classes["number"]}`}>
            {counter}+
          </span>
          <br />
          <h2 class={`${classes["notes-label"]} ${classes.label}`}>Notes</h2>
        </div>
        <div>
          <span class={`${classes["books-number"]} ${classes.number}`}>
            {counter1}+
          </span>
          <br />
          <h2 class={`${classes["books-label"]} ${classes.label}`}>Books</h2>
        </div>
        <div>
          <span class={`${classes["pyqs-number"]} ${classes.number}`}>
            {counter2}+
          </span>
          <br />
          <h2 class={`${classes["pyqs-label"]} ${classes.label}`}>PYQ's</h2>
        </div>
        <div>
          <span class={`${classes["downloads-number"]} ${classes.number}`}>
            {counter3}+
          </span>
          <br />
          <h2 class={`${classes["downloads-label"]} ${classes.label}`}>
            Download's
          </h2>
        </div>
      </div>
    </div>
  );
}
export default Numbers;

CSS Code

.number-section {
  background-color: #efeef9;
  padding: 4rem 6rem;
  border-radius: 2rem;
  width: 120rem;
  margin: 10rem auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notes-books-pyq {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8.6rem;
}

.notes-books-pyq div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.Number-heading {
  font-size: 3rem;
  color: #333;
}

.number {
  font-size: 4.4rem;
  color: #5236ff;
  font-weight: 600;
}

.label {
  font-size: 2rem;
  color: #333;
}