I'm trying to animate a size change inside a Dialog in Jetpack Compose using AnimatedContent. The goal is to smoothly transition between two different UI states that have different heights. However, the size animation doesn't work correctly as it can be seen in the gif below.

Here is a simplified version of my code. The Box elements are just placeholders to test different heights.

@Composable
fun DialogWithAnimation() {

    var state by remember { mutableIntStateOf(0) }

    Dialog(onDismissRequest = {}) {
        Surface(shape = AlertDialogDefaults.shape) {
            Column {

                // Header
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.spacedBy(16.dp)
                ) {
                    MyHeaderButton(
                        modifier = Modifier.weight(1f),
                        isActive = state == 0,
                        label = "A"
                    ) { state = 0 }
                    MyHeaderButton(
                        modifier = Modifier.weight(1f),
                        isActive = state == 1,
                        label = "B"
                    ) { state = 1 }
                }

                AnimatedContent(
                    targetState = state,
                    label = "A-B-content",
                    transitionSpec = {
                        (fadeIn(animationSpec = tween(220)) togetherWith
                         fadeOut(animationSpec = tween(90)))
                    }
                ) { target ->

                    if (target == 0) {
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(100.dp)
                                .background(Color.Blue)
                        )
                    } else {
                        Box(
                            modifier = Modifier
                                .fillMaxWidth()
                                .height(150.dp)
                                .background(Color.Yellow)
                        )
                    }
                }
            }
        }
    }
}

I expected the content inside the dialog to animate smoothly when changing its height.
This is the current behavior: