I have a LazyColumn list where, when an element is added, a timer starts counting in it, but when I start scrolling the list, elements that go out of focus at the top stop the timer and continue to work only when this element appears in focus, I know that there is no direct way in Compose Continue updating the state of items that are outside the visible list area. When an element goes out of visibility, the virtual scroller reuses its composition for other elements in the scroll area, and it can only be redrawn or rebuilt when the scroll area is re-entered, however there is a way to update the values ​​of elements in RecyclerView, but how do I do this in compose

I tried quite a lot of options, but none of them worked, how can I achieve the expected result?

Here is one of the options I tried:

@Composable
fun LazyColumnWithDynamicItems(
    dataList: List<MessageType>,
) {
    val savedState = remember { mutableStateMapOf<Int, Int>() }

    LaunchedEffect(Unit) {
        while (true) {
            for (message in dataList) {
                val timerValue = savedState[message.id] ?: 0
                savedState[message.id] = timerValue + 1
            }
            delay(1000)
        }
    }

    LazyColumn(reverseLayout = true) {
        items(dataList) { message ->
            FileItems(
                message = message,
                savedState = savedState,
            )
        }
    }
}

@Composable
fun FileItems(
    message: MessageType,
    savedState: MutableMap<Int, Int>,
) {
    val coroutineScope = rememberCoroutineScope()
    val totalSeconds = savedState[message.id] ?: 0

    LaunchedEffect(message.id) {
        coroutineScope.launch {
            var seconds = totalSeconds
            while (isActive) {
                withContext(Dispatchers.IO) {
                    savedState[message.id] = seconds
                    seconds++
                }
                delay(1000)
            }
        }
    }
    Text(text = "#${message.id}: $totalSeconds seconds")
}