StickyHeader not following the scrolling in LazyColumn

I am building an app fully compose and used LazyColum + StickyHeader to display the elements I need to. However, the stickyHeader is not moving at the same pace. It stays on screen untli the next header arrives. I put a link to the video below:

https://photos.app.goo.gl/LbWTrSwfRQVze9ce7

I used the code below to do it:

   Column(modifier
        .padding(horizontal = 36.dp)) {
        LazyColumn(modifier
            .padding(top = 36.dp)) {
            list.forEach { category ->
                stickyHeader {
                    CategoryHeader(title = category.type)
                }
                items(category.transactions) { transaction ->
                    ItemRow(navController, transaction)
                }
            }
        }
    }

Any idea how to make sure that the header is scrolling when the items are scrolling >

Source: View source