HorizontalPager: when scrolling horizontally shows the content of the previous tab

Question

I am trying to make a menu with two tabs which have different screens. I used HorizontalPager for this but I can't get the content of the previous tab to be displayed when scrolling from one tab to the other.

these are the versions I have:

• compose: 1.1.1
• accompanist-pager:0.28.0

here's what I did:

    Column(
        modifier = Modifier
            .padding(16.dp)
    ) {
        TabRow(
            backgroundColor = Color.White,
            contentColor = Color.Black,
            selectedTabIndex = pagerState.currentPage,
            indicator = { tabPositions ->
                TabRowDefaults.Indicator(
                    Modifier.pagerTabIndicatorOffset(pagerState, tabPositions),
                    color = MaterialTheme.colors.secondary
                )
            },
        ) {
            tabRowItems.forEachIndexed { index, item ->
                Tab(
                    selected = pagerState.currentPage == index,
                    onClick = { coroutineScope.launch { pagerState.animateScrollToPage(index) } },
                    text = {
                        Text(
                            text = item.title,
                            maxLines = 2,
                            overflow = TextOverflow.Ellipsis,
                        )
                    }
                )
            }
        }
        HorizontalPager(
            count = tabRowItems.size,
            state = pagerState,
        ) {
            when (pagerState.currentPage) {
                0 -> {
                    BenefitsScreen()
                }
                1 -> {
                    PointsScreen()
                }
            }
        }
    }