Jetpack Compose [ ModalBottomSheetLayout + BottomSheetScaffold + Scaffold] - Help Needed

Question

I have a requirment in my jetpack compose app where i need to display modal bottom sheet and persistent bottom sheet and bottom navigation

How can i use all these three in a single screen

I have tried this layout based on this reference I have below nested layout structure

ModalBottomSheetLayout
   |- BottomSheetScaffold
      |- Scaffold
         |- BottomNavigation

when i use this structue i am facing issue with closing and opening of the modal bottom sheet and persistent bottom sheet

How can i achive this layout with all three ?

---

CODE

 ModalBottomSheetLayout(
        sheetContent = {
            // MODAL SHEET CONTENT
        },
        sheetState = modalBottomSheetState,
    ) {
        BottomSheetScaffold(
            sheetContent = {
                // BOTTOM SHEET CONTENT
            },
            scaffoldState = bottomSheetScaffoldState,
            sheetPeekHeight = 0.dp,
        ) {
            Scaffold(
                scaffoldState = scaffoldWithDrawerState,
                drawerContent = {
                  // DRAWER CONTENT
                },
                bottomBar = {
                    BottomBar(navController = navController)
                },
            ) {
               // NAV HOST FOR THE BOTTOM NAVIGATION SCREENS
            }
        }
    }