jetpack compose - LazyColumn sticky header

MainActivity.kt

package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlin.random.Random

class MainActivity : AppCompatActivity() {
    @ExperimentalFoundationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @ExperimentalFoundationApi
    @Composable
    fun MainContent(){
        val categories = listOf("A", "B", "C", "D", "E", "F",
            "G", "H", "I", "J", "K", "L", "M", "N", "O", "P",
            "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z")

        Box(
            modifier = Modifier.fillMaxSize()
        ) {
            LazyColumn(
                modifier = Modifier
                    .background(Color(0xFFFEFEFA))
                    .wrapContentHeight()
                    .fillMaxWidth(),
                contentPadding = PaddingValues(12.dp),
                verticalArrangement = Arrangement.spacedBy(8.dp),
                reverseLayout = false
            ) {
                categories.forEach { category ->
                    stickyHeader {
                        Card(
                            backgroundColor = Color(0xFFE52B50),
                            modifier = Modifier
                                .fillMaxWidth(),
                            elevation = 8.dp,
                            shape = RoundedCornerShape(16.dp)
                        ) {
                            Text(
                                text = category,
                                fontWeight = FontWeight.Bold,
                                fontSize = 50.sp,
                                fontFamily = FontFamily.Cursive,
                                color = Color(0xFFFAE7B5),
                                textAlign = TextAlign.Center,
                                modifier = Modifier.padding(16.dp)
                            )
                        }
                    }

                    items(Random.nextInt(1,11)) { item ->
                        Card(
                            backgroundColor = Color(0xFF008000),
                            modifier = Modifier
                                .fillMaxWidth(),
                            elevation = 8.dp,
                            shape = RoundedCornerShape(16.dp)
                        ) {
                            Text(
                                text = "$category $item",
                                fontSize = 35.sp,
                                fontFamily = FontFamily.Cursive,
                                color = Color(0xFFFAE7B5),
                                textAlign = TextAlign.Center,
                                modifier = Modifier.padding(16.dp)
                            )
                        }
                    }
                }
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}