I want to make a Game where some items are falling from the top and if they are clicked they disappear and raise the score, but I cannot see the items.

I use the setInterval to push the random items into the list at intervals and render the items list.

If I put a fixed list, it shows the items but all at the same time. I want the items to keep adding in continuously. It's okay to not use the interval. I just don't know the other way.

codes:

var DgArray:string[] = []

const [sec, setSec] = useState();

const time: any = useRef(10);
const timerId: any = useRef('startTimer');

useEffect(() => {
    timerId.current = setInterval(() => {
        setSec(time.current);
        time.current -= 1;
        console.log(time.current)
        DgArray.push(RandomKind()) //RandomKind returns a string
        console.log(DgArray)
    }, 1000);

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


if (time.current <= 0) {
        console.log("TimeOut");
        clearInterval(timerId.current);
    }
}, [sec]);

the return

<IonPage className="Game">
        <h1 id="startTimer">{Number((sec / 10).toFixed(0))}</h1>
        { DgArray.map((value, idx) => <Dg kind={value} DgNum={idx}></Dg>)}
</IonPage >

in console, the DgArray is keep adding.

and I found using the breakpoint in Dg component that it goes to the Dg component, but it does not return even in the component.