I am trying to make a very simple display time project for practicing my coding skills, the main implementation logic is completed, but there is a tiny problem is that I want to implement a fancy way to let the digit slide with a animation effect, but it failed

The main part is the following

/src/components/DigitDisplay.tsx

"use client";

interface Props {
    numberString: string;
}

const digits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
const digitRegexp = /d/;

export default function DigitDisplay(props: Props) {
    const { numberString } = props;

    return (
        <div className="display-group">
            {numberString.split("").map((str, index) => (
                <div key={str + index} className="digit-wrapper">
                    {digitRegexp.test(str) ? (
                        <span
                            className="digit-list"
                            style={{
                                transform: `translate(-50%, -${
                                    Number(str) * 32
                                }px)`,
                                transition: `transform 600ms`,
                            }}
                        >
                            {digits.map((digit, index) => (
                                <span key={index}>{digit}</span>
                            ))}
                        </span>
                    ) : (
                        <span>{str}</span>
                    )}
                </div>
            ))}
        </div>
    );
}

/src/page.tsx

"use client";
import DigitDisplay from "./components/DigitDisplay";
import { useEffect, useMemo, useState } from "react";

export default function Home() {
    const [time, setTime] = useState(Date.now());
    useEffect(() => {
        setInterval(() => {
            setTime(Date.now());
        }, 1000);
    }, []);

    const timeStr = useMemo(() => {
        return new Date(time).toLocaleTimeString();
    }, [time]);
    return (
        <div>
            <DigitDisplay numberString={timeStr} />
        </div>
    );
}

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --background: #feffff;
    --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #0a0a0a;
        --foreground: #ededed;
    }
}

body {
    color: var(--foreground);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
}

.app {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
}

.digit-wrapper {
    width: 24px;
    height: 32px;
    font-size: 24px;
    line-height: 32px;
    background: black;
    position: relative;
    border-radius: 6px;
    margin-right: 12px;
    text-align: center;
    overflow: hidden;
    &:last-child {
        margin-right: 0;
    }
}

.digit-list {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.display-group {
    display: flex;
    align-items: center;
    color: white;
    user-select: none;
}

.bouncy-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    animation: moveUpDown 1s infinite;
}

I tried many ways to test is there something wrong with my code or my wrong way to use tailwindCSS (I am newbie to that), but didn’t find the possbile mistake, which was kind of annoying, could someone help to debug here?