timer.js

export const Timer = (props) => {
  const [counter, setCounter] = useState(15);

  const text = props.text.toUpperCase();
  const handler = React.useRef<any>();

  useEffect(() => {
    handler.current = setInterval(() => {
      setCounter((prev) => prev - 1);
    }, 1000);

    return () => clearInterval(handler.current);
  }, []);

  useEffect(() => {
    if (counter === 0) {
      clearInterval(handler.current);
    }
  });

  return (
    <div className="timer">
      <div className="counter" style={{border: '1px solid black'}}>
        <div className="text">{text}</div>
        <div className="timer_counter">{counter}</div>
      </div>
    </div>
  );
};