Wrong ripple in material3 NavigationBar in Jetpack Composee

Question

When I use Material3 NavigationBar in Jetpack Compose I get wrong rectangular ripple effect like this:

Material3 library version: 1.0.0-alpha06 Code:

NavigationBar(modifier = Modifier.navigationBarsPadding()) {
                NavigationBarItem(
                    selected = ...,
                    onClick = {
                        navController.navigate(ScreenComponents(context).mainScreen) {
                            launchSingleTop = true
                        }
                    },
                    icon = {
                        ...
                    },
                    alwaysShowLabel = false,
                    label = {
                        Text(text = ..., color = MaterialTheme.colorScheme.onSurface)
                    }
                )
                // ...

Answer 1

It is not a bug. It follows the material guidelines.

Answer 2

In NavigationBarItem I use this modifier to change the shape of the ripple

modifier = Modifier
    .padding(4.dp)
    .background(MaterialTheme.colorScheme.background, RoundedCornerShape(24.dp))
    .clip(RoundedCornerShape(24.dp))