Bottom Navigation Bar in material 3 android jetpack compose

When I want to round corner, I adding shadow to it, I have little border on top of my navigation bottom bar, so my shadow and rounded corner is not looking good, I want to make something like that

and I m getting this

I changed the color to see better,

                var selectedItemIndex by rememberSaveable {
                    mutableStateOf(0)
                }
                    Scaffold (
                    containerColor = Color.Transparent,
                    modifier = Modifier.fillMaxSize(),
                    bottomBar = {
                                  NavigationBar(
                                             modifier = Modifier.fillMaxWidth()
                                                       .shadow(elevation = 3.dp, RoundedCornerShape(topEnd = 20.dp, topStart = 20.dp)),
                                             containerColor = Color.DarkGray

                                )
                                  {
                                    BottomNavigationForEachItem.forEachIndexed { index, bottomNavItem ->
                                        NavigationBarItem(
                                            modifier = Modifier.padding(vertical = 5.dp),
                                            selected = selectedItemIndex == index,
                                            onClick = {
                                                selectedItemIndex = index
                                                navController.navigate(bottomNavItem.route)
                                            },
                                            icon = {
                                                Icon(
                                                    modifier = Modifier.size(32.dp),
                                                    imageVector = if (selectedItemIndex == index) {
                                                        bottomNavItem.selectedIcon
                                                    } else bottomNavItem.unSelectedIcon,
                                                    contentDescription = bottomNavItem.label
                                                )
                                            }
                                        )
                                    }
                                }
                              }
                            ){innerPadding ->
                
                            NavHost(
                            navController = navController,
                            startDestination = startDestination.route,
                            modifier = Modifier.padding(innerPadding)
                        ){
                            composable(ScreenNav.Auth.route) {
                                AuthScreen(navController)
                            }

                            composable(ScreenNav.Login.route) {
                                SignInScreen(navController)
                            }

                            composable(ScreenNav.Home.route) {
                                val viewModel = hiltViewModel<HomeViewModel>()
                                val tala = viewModel.talaPagingFlow.collectAsLazyPagingItems()
                                val itemMeta = viewModel.itemMetaPagingFlow.collectAsLazyPagingItems()
                                val itemMetaMap by viewModel.itemMetaMap.collectAsState()

                                HomeScreen(
                                    tala = tala,
                                    itemMeta = itemMeta,
                                    onFetchItemMeta = { itemId -> viewModel.getItemMeta(itemId) },
                                    itemMetaMap = itemMetaMap
                                )
                            }

                            composable(ScreenNav.Saved.route) {
                                SavedScreen()
                            }

                            composable(ScreenNav.Profile.route) {
                                ProfileScreen()
                            }

                        }
                    }

and

val BottomNavigationForEachItem = listOf(

BottomNavItem(
    selectedIcon = Icons.Filled.Person,
    unSelectedIcon = Icons.Outlined.Person,
    route = ScreenNav.Profile.route
),
BottomNavItem(
    selectedIcon = Icons.Filled.Home,
    unSelectedIcon = Icons.Outlined.Home,
    route = ScreenNav.Home.route
),
BottomNavItem(
    selectedIcon = Icons.Filled.Favorite,
    unSelectedIcon = Icons.Outlined.Favorite,
    route = ScreenNav.Saved.route
)  
)

and this is my data class

data class BottomNavItem(
val selectedIcon: ImageVector,
val unSelectedIcon: ImageVector,
val route: String
)

I tried a lot but I couldn't remove this little border on top of my bottom navigation , actually this border, is the same color of Scafold, i try to use windowInsets = 0.dp and tonalElevation = 0.dp in NavigationBar but not working, first I added to Box, I thought this Box is the problem but not

I used Box in my home screen for paginate items so I got this padding in top of navigation bottom, so I removed that and using just Lazy vertical grid, everything getting fine now!