List From Firebase Database not displayed in LazyColumn in Compose

Question

The list shows usernames on the console when I use the code below

Log.d("read data", "Yay!${bal.displayName}")

But when I add the list to the LazyColumn, it doesn't display anything, except the single items I add atop and below the list to check if it was showing at all. Below is my code

  @Composable
    fun UsersList(userInf: List<UserInfo.Uids>) {
        Scaffold {
            LazyColumn{
               items(userInf) {users ->
                   users.displayName?.let {
                Text(it)
           }
                }

            }
        }

    }

Firebase Query I got the code from the official website for Firebase query here

 ref.addChildEventListener(object : ChildEventListener {
            override fun onChildAdded(snapshot: DataSnapshot, previousChildName: String?) {
                for (dataSnapshot in snapshot.children) {
                    val bal = snapshot.getValue<UserInfo.Uids>()
               if (bal != null) {
                    balList.add(bal)
                    Log.d("read data", "Yay!${bal.displayName}")
                }}
               

               


            }

})

In conclusion, Data is read from the database but, not displayed on LazyColumn in Compose

UPDATE

This is how balList is instantiated

var balList = ArrayList<UserInfo.Uids>()

This is the data class

data class UserInfo(
        val uid: Uids) {
        data class Uids(
            var displayName: String? = null,
        )
    }

Additionally, I realised that the value added to balList from the firebase query doesn't keep its value outside the query functions, seems it has something to do with states