How to remove oval shaped indicator from NavigationBarItem in NavigationBar (Jetpack compose)?

Question

The NaviagtionBar I am using actually has a gradient effect going from transparent to black color with alpha values of black color in between. My container color is transparent, but on active navigationBarItem, there's an indicator behind the icon of oval shaped (as in picture). I want to remove that or change it to transparent but it is not working.

@Composable
fun BottomBar(navController: NavHostController) {
    val screens = listOf(
        BottomNavItems.Home,
        BottomNavItems.Search,
        BottomNavItems.Library
    )
    val navStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navStackEntry?.destination
    val gradientColors = listOf(
        Color.Black.copy(alpha = 0f),
        Color.Black.copy(alpha = 0.7f),
        Color.Black.copy(alpha = 0.9f),
        Color.Black
    )
    val colors = NavigationBarItemDefaults.colors(
        selectedIconColor =Color.White,
        unselectedIconColor = Color.Gray,
        indicatorColor = Color.Transparent
    )
    NavigationBar(
        modifier = Modifier
            .height(65.dp)
            .background(
                brush = Brush.verticalGradient(
                    colors = gradientColors,
                )
            ),
        containerColor = Color.Transparent,
        windowInsets = WindowInsets(left = 30.dp, right = 30.dp, bottom = 15.dp)
    ) {
        screens.forEach { screen ->
            AddItem(
                screen = screen,
                currentDestination = currentDestination,
                navController = navController
            )
        }
    }
}

@Composable
fun RowScope.AddItem(
    screen: BottomNavItems,
    currentDestination: NavDestination?,
    navController: NavHostController
) {
    NavigationBarItem(
        selected = currentDestination?.hierarchy?.any {
            it.route == screen.route
        } == true,
        onClick = {
            if (currentDestination?.hierarchy?.any {
                    it.route == screen.route
                } == false) {
                navController.navigate(screen.route) {
                    popUpTo(navController.graph.findStartDestination().id)
                    launchSingleTop = true
                }
            }
        },
        alwaysShowLabel = true,
        label = {

        },
        icon = {
            Column(
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Icon(
                    painter = painterResource(id = screen.icon),
                    contentDescription = screen.name,
                    modifier = Modifier.size(30.dp)
                )
                Text(text = screen.name, style = MaterialTheme.typography.labelSmall)
            }
        },
        colors = NavigationBarItemDefaults
            .colors(
                selectedIconColor = Color.White,
                unselectedIconColor = Color.Gray,
                indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(LocalAbsoluteTonalElevation.current).copy(alpha = 0f)
            )
    )
}

Here is the image I am talking about

I tried and tested by changing

indicatorColor = MaterialTheme.colorScheme.surfaceColorAtElevation(LocalAbsoluteTonalElevation.current).copy(alpha = 0f)

to various other values, changing it to Color.Transparent as well. But always stays dark.