Maximum call stack size exceeded, trying to make counting up value in my div

Question

I'm trying to make changing innerText in my div from 0 to value in div.

Can you tell me - why call stack size exceeded, I tried to create condition to leave my recursion - but it doesn't work.

const itemsToCount = document.querySelectorAll('.customers'); 

function counter (item) {
    let stopPoint = Number(item.innerText.slice(0,-1));
    let counterNum = 0; 
    function increase () {  
        if (counterNum === stopPoint) {
            item.innerText = `${item}+`
            return; 
        } else {
            setTimeout(() => {
                item.innerText = counterNum; 
            }, 100)
            counterNum += 1;
            return increase(); 
        }
    }

    increase()
}

Array.from(itemsToCount).forEach(item => {
    counter(item)
})

My HTML looks like

<div class="wrapper">
    <p class="experience__counter customers">250+</p>
    <p class="experience__counter customers">20+</p>
    <p class="experience__counter customers">150+</p>
</div>

Answer 1

"try putting counterNum += 1; increase(); INSIDE the setTimeout callback" Bravo 2 days ago

thank you, https://stackoverflow.com/users/10549313/bravo