How to remove overlapping of sheet content and navigation bar in bottomsheet scaffold?

I want to remove the overlapping between sheet content and navigation bar of a bottom sheet scaffold.

This is the a clip of the output:

This is my Code Sample :

 val sheetState = rememberStandardBottomSheetState(
        skipHiddenState = true,
        initialValue = SheetValue.PartiallyExpanded
    )

    val scope = rememberCoroutineScope()
    val bottomPadding = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
    Box(
        modifier = Modifier
            .fillMaxSize()
//            .padding(MaterialTheme.dimens.paddingMedium)
            .statusBarsPadding()
            .background(Color.Black)
            .navigationBarsPadding()
    ) {
        BottomSheetScaffold(
            scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = sheetState),
            sheetPeekHeight = 100.dp,
            sheetContainerColor = MaterialTheme.colorScheme.surface,
            sheetContent = {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .heightIn(min = 100.dp, max = 500.dp)

                        .padding(16.dp)
//                        .windowInsetsPadding(WindowInsets.navigationBars)
//                    .padding(WindowInsets.navigationBars.asPaddingValues())

                ) {
                    Text("Filters", style = MaterialTheme.typography.titleLarge)
                    Spacer(Modifier.height(12.dp))
                    Button(onClick = {
                        scope.launch { sheetState.expand() }
                    }) {
                        Text("Expand Fully")
                    }
                    Spacer(Modifier.height(12.dp))
                    Button(onClick = {
                        scope.launch { sheetState.partialExpand() }
                    }) {
                        Text("Collapse")
                    }
                }
            }
        ) { }
    }

So far i have tried using window insets and navigation bar paddings but it seems none of this has worked.

Try this, it is like a workaround but it can achieve what u want. Also, make sure to add navigation bar padding to the content of scaffold.

    val sheetState = rememberStandardBottomSheetState(
        skipHiddenState = true,
        initialValue = SheetValue.PartiallyExpanded
    )
    val navigationBarHeight =
        WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()
    Box(
        modifier = Modifier
            .background(Color.Black)
            .fillMaxSize()
    ) {
        val scope = rememberCoroutineScope()
        BottomSheetScaffold(
            scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = sheetState),
            sheetPeekHeight = 150.dp + navigationBarHeight,
            sheetContainerColor = MaterialTheme.colorScheme.surface,
            sheetContent = {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .heightIn(min = 100.dp, max = 500.dp)
                        .padding(16.dp)
                        .navigationBarsPadding()
                ) {
                    Text("Filters", style = MaterialTheme.typography.titleLarge)
                    Spacer(Modifier.height(12.dp))
                    Button(onClick = {
                        scope.launch { sheetState.expand() }
                    }) {
                        Text("Expand Fully")
                    }
                    Spacer(Modifier.height(12.dp))
                    Button(onClick = {
                        scope.launch { sheetState.partialExpand() }
                    }) {
                        Text("Collapse")
                    }
                }
            }
        ) { }
        Surface(
            Modifier
            .align(Alignment.BottomCenter)
            .background(Color.White)
            .fillMaxWidth()
            .height(navigationBarHeight)
        ){}
    }