Android Compose: Screen Freeze when Closing Bottom Sheet with Drag or Back Press

I'm working on an Android app using Jetpack Compose, and I've encountered a problem When I interact with a Bottom Sheet (dragging it down or using the back button to dismiss it), my screen becomes unresponsive, and nothing works until I restart the app.. This behavior is not expected, and I'm struggling to identify the root cause. Here are the relevant details:

this is BottomSheet:

fun BottomSheet(
    onDismiss: () -> Unit
) {
    val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)  
    val scope = rememberCoroutineScope()
    
    scope.launch {
            bottomSheetState.expand()
    }
    
    ModalBottomSheet(
        onDismissRequest = { onDismiss() },
        sheetState = bottomSheetState,
        dragHandle = { BottomSheetDefaults.DragHandle() }
    ) {
             ColorPicker()     
    }
    
}```

this is where it opens:

Scaffold(
modifier = Modifier.fillMaxSize(),
scaffoldState = scaffoldState,
topBar = {
AppBar(
...
)
},
content = { paddingValue -\>

            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(
                        top = paddingValue.calculateTopPadding(),
                    )
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                        .verticalScroll(rememberScrollState())
                
                ) {
                    // Night Mode setting Section
                        ...
                    // Font setting Section
                        ...
                    // color setting Section
    
                        CustomCard(
                            title = "Color",
                            isExpandedInitially = fontColorSettingExpand,
                            onItemClick = {
                                fontColorSettingExpand = !fontColorSettingExpand
                            }) {
                            BottomSheet(
                                onDismiss = {
                                    //todo save
                                })

}```

What I've Tried:

• Checked my state management to ensure it's correct.
• Reviewed my coroutine usage for any potential blocking issues.
• Verified that I'm using the appropriate Compose components and ScaffoldState.

Add ModalBottomSheet to compose only when it is visible. Use the following condition to solve your problem:

fun BottomSheet(
    onDismiss: () -> Unit
) {
    val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) 
    LaunchedEffect(key1 = Unit) {
            bottomSheetState.expand()
    }
    
    if (bottomSheetState.isVisible) //<-- add this condition to add sheet only when it is visible
        ModalBottomSheet(
             onDismissRequest = { onDismiss() },
             sheetState = bottomSheetState,
             dragHandle = { BottomSheetDefaults.DragHandle() }
         ) {
             ColorPicker()     
           }
    
}