Jetpack compose : LazyColumn scroll incorrectly until the content items are scrolled / seen at least once

Question

I am facing issue in jetpack compose LazyColumn scroll feature. I have 4 items in LazyColumn which are dynamically loaded from server and I do have a top bar which can be used to jump to those 4 sections straightaway.

Scenario 1 (jumping on indexes after app launch):

Now, on app launch, I do see the first item in the list as it starts with index 0. If I try to jump to index 3 or index 4 which are easily 4-5 pages down because of their content, it doesnt scroll to correct page. It shows content of page index 2 item. BUT after that, if I click 3/4 again, it jumps to that page fine. I can jump to any index after that and it goes there correctly.

Scenario 2 (scrolling through all the content after app launch and then jumping on indexes):

If I manually scroll the list once from top to bottom, all these jumping to indexes works fine !!

Workaround (it smells though!!) :

I found a equally weird cheap workaround to this issue. If I keep a spacer / divider of ~500 dp AFTER the last indexed item, I dont see this issue at all !! I have no clue why !

My guess:

It feels like the lazyvolumn is not calculating the starting location for indexes after 1. and once these pages are seen, it knows the correct starting location. Not sure if I am miscalculating OR if its LazyColumn's scrolling issue for dynamic content to calculate the correct starting location for items in it.

Here is the code:

@Composable
fun DiscoverScreen(
    screenCoordinator: ScreenCoordinator,
    componentCoordinator: ComponentCoordinator
) {

    val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    Column(
        modifier = Modifier.wrapContentHeight().wrapContentWidth()
    ) {
        Row(
            modifier = Modifier.wrapContentWidth().height(100.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween

        ) {
            Column(modifier = Modifier.wrapContentWidth().wrapContentHeight().padding(20.dp)
                .clickable {
                    coroutineScope.launch {
                        listState.scrollToItem(index = 0)
                    }
                }) {
                Text(text = "To Market")
            }
            Column(modifier = Modifier.wrapContentWidth().wrapContentHeight().padding(20.dp)
                .clickable {
                    coroutineScope.launch {
                        listState.scrollToItem(index = 1)
                    }
                }) {
                Text(text = "To News")
            }
            Column(modifier = Modifier.wrapContentWidth().wrapContentHeight().padding(20.dp)
                .clickable {
                    coroutineScope.launch {
                        listState.scrollToItem(index = 2)
                    }
                }) {
                Text(text = "To Rating")
            }
            Column(modifier = Modifier.wrapContentWidth().wrapContentHeight().padding(20.dp)
                .clickable {
                    coroutineScope.launch {
                        listState.scrollToItem(index = 3)
                    }
                }) {
                Text(text = "To Earnings")
            }
        }

        LazyColumn(modifier = Modifier.fillMaxWidth(), state = listState) {
            item {
                MarketComponent(coordinator = screenCoordinator)
            }
            item {
                NewsComponent(coordinator = screenCoordinator)
            }
            item {
                RatingsComponent(screenCoordinator)
            }
            item {
                EarningsComponent(coordinator = screenCoordinator)
            }
//            item {
//                Divider(modifier = Modifier.alpha(0f), thickness = 550.dp)  //adding this dummy items fix scroll issue
//            }
        }
    }
}