How to wrap each character in a span?

Question

React

There is a timer on the page, consists of days, minutes and seconds.

const { days, hours, minutes, seconds } = useCountdown(countdownDate);

<div className={styles.timer}>
      <div className={styles.item}>
        <div>{days || 0}</div>
        <span>days</span>
      </div>
      <div className={styles.item}>
        <div>{hours || '00'}</div>
        <span>hr</span>
      </div>
      <div className={styles.item}>
        <div>{minutes || '00'}</div>
        <span>min</span>
      </div>
      <div className={styles.item}>
        <div>{seconds || '00'}</div>
        <span>sec</span>
      </div>
    </div>

where, for example, seconds - displays the integer '57'.

But how can I wrap each character in a separate span for styling - I'll never know.

so you need:
<span>5</span><span>7</span>

Answer 1

And that's it, I did it ...
Suddenly it will come in handy for someone:

const addSpan = (note: any) => {
    return [...note].map((letter) => <span>{letter}</span>);
  };

<div>{addSpan(seconds) || '00'}</div>