BottomSheet content is not rendered when animating bottom sheet itself

[hannta]

I'm working on a screen where a fully expanded bottom sheet 'merges' with the top part of the screen. I'm attempting to achieve this by animating the bottom sheet's clip shape, shadow shape, and elevation.

During the animation of the BottomSheet, the content (red component) isn't rendered. Additionally, after the first animation of the BottomSheet, the content isn't rendered at all.

If I wrap the BottomSheet with key(cornerRadius, shadowElevation) component, it forces the content to be rendered, but the drag gesture is then interrupted.

Im using compose 1.7.7 on Android

Record_2025-02-01-14-11-46.mp4

Example:

@Composable
fun TestScreen() {
    Scaffold { innerPadding ->
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize()
        ) {
            var containerSize by remember { mutableStateOf(IntSize.Zero) }

            val HalfExpanded =
                SheetDetent(identifier = "half-expanded") { containerHeight, _ ->
                    containerHeight - 170.dp
                }

            val Peek = SheetDetent(identifier = "peek") { containerHeight, _ ->
                128.dp
            }

            val sheetState = rememberBottomSheetState(
                initialDetent = HalfExpanded,
                detents = listOf(FullyExpanded, HalfExpanded, Peek)
            )

            val isFullExpanded by remember {
                derivedStateOf { containerSize.height == sheetState.offset.toInt() }
            }

            val cornerRadius by animateDpAsState(
                targetValue = if (isFullExpanded) 0.dp else 28.dp,
                animationSpec = tween(durationMillis = 300)
            )

            val shadowElevation by animateDpAsState(
                targetValue = if (isFullExpanded) 0.dp else 4.dp,
                animationSpec = tween(durationMillis = 300)
            )

            val shape = RoundedCornerShape(topStart = cornerRadius, topEnd = cornerRadius)

            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .background(Color.Magenta)
            )

            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Green)
                    .onSizeChanged {
                        containerSize = it
                    }
            ) {
                BottomSheet(
                    state = sheetState,
                    modifier = Modifier
                        .shadow(elevation = shadowElevation, shape = shape)
                        .clip(shape)
                        .background(Color.Red)
                        .fillMaxWidth()
                ) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(1200.dp),
                        contentAlignment = Alignment.TopCenter
                    ) {
                        DragIndication(
                            modifier = Modifier
                                .padding(top = 22.dp)
                                .background(Color.Black.copy(0.4f), RoundedCornerShape(100))
                                .width(32.dp)
                                .height(4.dp)
                        )
                    }
                }
            }
        }
    }
}