How to call suspend fun in kotlin/js/react, and update State

Question

I have a suspend fun, and want to append its result to a list (in State) when it return. Following code dose not work.
Assuming I click 'short' 3 times, and 'long' 1 time, then, in 3000 millisecond (which suspend fun result calling need), I click 'short' 2 times again.
I expected, the list should be " a a a a a long", but it was "a a a a a", and changed to "a a a long".
It seems that, when suspend fun return, in addResult function, can not get the newest list instance.
So, what is I missed? How to get my expected? Please help.

val Bug = VFC{
    var list by useState<List<String>>(emptyList())
    val addResult = { result:String ->
        list = list + result
    }
    button{
        +"short add"
        onClick = {
            addResult( "a")
        }
    }
    button{
        +"long add"
        onClick = {
            mainScope.launch {
                addResult(result())
            }
        }
    }
    ul {
        list.forEach {
            li{
                +it
            }
        }
    }
}
suspend fun result():String{
    delay(3000)
    return "long"
}