I am currently studying Jetpack Compose and Material3, and I am trying to implement a password change screen as a popup that occupies only half of the screen. Despite my efforts to round the top left and right corners, the background color still appears white.

enter image description here

After spending an entire day trying to solve this issue without success, I kindly seek your advice. Is it the case in Android that the default background color is set to white if none is specified?

@OptIn(ExperimentalMaterialApi::class)
fun NavGraphBuilder.changePasswordComposable(
    navController: NavHostController,
    userViewModel: UserViewModel,
) {
    composable(
        route = Screens.CHANGE_PASSWORD_SCREEN,
    ) {
        var user by remember { mutableStateOf(User()) }

        LaunchedEffect(Unit) {
            user = userViewModel.getLoggedInUser()
        }

        val bottomSheetState =
            rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
        val coroutineScope = rememberCoroutineScope()

        ModalBottomSheetLayout(
            sheetState = bottomSheetState,
            sheetContent = {
                ChangePasswordScreen(
                    onBackClicked = {
                        coroutineScope.launch {
                            bottomSheetState.hide()
                        }
                    }, onChangePasswordClicked = { newPassword, oldPassword ->
                        // Handle password change logic
                    }
                )
            },
            sheetBackgroundColor = Color.Transparent, // Transparent Background
            sheetShape = RoundedCornerShape(
                topStart = 16.dp, topEnd = 16.dp
            ),// circle shape 
        ) {
            // 
            Box(modifier = Modifier.fillMaxSize()) {
                // 
                LaunchedEffect(Unit) {
                    coroutineScope.launch {
                        bottomSheetState.show()
                    }
                }
            }
        }
    }
}

@Composable
fun ChangePasswordScreen(
    onBackClicked: () -> Unit,
    onChangePasswordClicked: (String, String) -> Unit
) {
    val focusManager = LocalFocusManager.current
    var newPassword by remember { mutableStateOf("") }
    var oldPassword by remember { mutableStateOf("") }
    var showNewPasswordError by remember { mutableStateOf(false) }
    var showOldPasswordError by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .background(
                backgroundColor,
                shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
            )
            .clip(RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)) // 
            .fillMaxWidth()
            .padding(16.dp)
            .verticalScroll(rememberScrollState())
    ) {
        UserInfoField(
            focusManager = focusManager,
            label = stringResource(id = R.string.new_password),
            value = newPassword,
            placeholder = stringResource(id = R.string.enter_new_password),
            isPassword = true,
            onValueChange = {
                newPassword = it
                showNewPasswordError = it.length < 8
            },
            showPasswordError = showNewPasswordError,
            errorMessage = if (showNewPasswordError) stringResource(
                id = R.string.password_too_short
            ) else ""
        )
        Spacer(modifier = Modifier.height(16.dp))
        UserInfoField(
            focusManager = focusManager,
            label = stringResource(id = R.string.old_password),
            value = oldPassword,
            placeholder = stringResource(id = R.string.enter_old_password),
            isPassword = true,
            onValueChange = {
                oldPassword = it
                showOldPasswordError = it.length < 8
            },
            showPasswordError = showOldPasswordError,
            errorMessage = if (showOldPasswordError) stringResource(
                id = R.string.password_too_short
            ) else ""
        )
        Spacer(modifier = Modifier.height(24.dp))
        DebounceClickable(
            onClick = {
                onChangePasswordClicked(newPassword, oldPassword)
            }
        ) {
            Button(
                onClick = { /*  */ },
                enabled = newPassword.isNotEmpty() && oldPassword.isNotEmpty() && !showNewPasswordError && !showOldPasswordError,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = SMALL_PADDING),
                colors = androidx.compose.material3.ButtonDefaults.buttonColors(
                    containerColor = selectedCr
                )
            ) {
                Text(
                    text = stringResource(id = R.string.change_password),
                    color = Color.White,
                    fontSize = MEDIUM_FONT_SIZE,
                    fontWeight = androidx.compose.ui.text.font.FontWeight.Bold
                )
            }
        }
    }
}