Nested Nav Graph produces a visual bug when I log out (Jetpack compose)

I have made a nested navigation graph in my app. It has a Root Nav Graph that handles the authNavGraph and MainScreen (has the scaffold that handles the MainNavGraph). It works but there's a visual bug when I log out from the Main screen to go to the auth screen. The bottom of the login screen is suddenly cropped and has a gray box at the bottom. Only the login screen has this problem because the sign up screen still looks the same after logging out. I don't know what's the problem here, can someone help?

This is the RootNavGraph:

@Composable
fun RootNavGraph(navController : NavHostController)
{
NavHost(navController = navController ,
        route = Graph.ROOT,
        startDestination = Graph.AUTHENTICATION)
{
    authNavGraph(navController = navController)
    composable(route = Graph.HOME) {
        MainScreen() //has the scaffold that contains the MainNavGraph
    }
  }
}

object Graph {
   const val ROOT = "root_graph"
   const val AUTHENTICATION = "auth_graph"
   const val HOME = "main_graph"
   const val DETAILS = "details_graph"
}

This the authNavGraph:

fun NavGraphBuilder.authNavGraph(navController : NavHostController)
{
    navigation(route = Graph.AUTHENTICATION, startDestination = AuthScreen.Login.route)
    {
    composable(route = AuthScreen.Login.route) {
        LoginScreen(
                viewModel = hiltViewModel() ,
                onNavigateToSignUp = { navController.navigate(AuthScreen.SignUp.route) },
                onNavigateToHome = { navController.popBackStack()
                                     navController.navigate(Graph.HOME)})
    }
    composable(route = AuthScreen.SignUp.route) {
        RegisterScreen(
                onNavigateUp = { navController.navigateUp()} ,
                viewModel = hiltViewModel())
    }
  }
}

Then the MainNavGraph:

@Composable
fun MainNavGraph(navController : NavHostController)
{
NavHost(navController = navController ,
        route = Graph.HOME,
        startDestination = BottomBarHomeItem.Home.route) {
    composable(route = BottomBarHomeItem.Home.route)
    {
        HomeScreen(
                viewModel = hiltViewModel(),
                onNavigateToLogin = { navController.popBackStack()
                                      navController.navigate(Graph.AUTHENTICATION)})
    }
    authNavGraph(navController)
  }
}

This is the visual bug it produces:

This the login screen code as ask in the comment:

@Composable
fun LoginScreen(
    viewModel : LoginViewModel,
    onNavigateToSignUp : () -> Unit,
    onNavigateToHome : () -> Unit
           )
{
    val state by viewModel.collectState()

LoginContent(
        isLoading = state.isLoading,
        email =  state.email,
        password =  state.password,
        onEmailChange =  viewModel::setEmail,
        onPasswordChange =  viewModel::setPassword,
        onLoginClick = viewModel::login ,
        onSignUpClick = onNavigateToSignUp ,
        error = state.error)

LaunchedEffect(state.isLoggedIn) {
    if (state.isLoggedIn) {
        onNavigateToHome()
    }
  }
}

@Composable
fun LoginContent(
    isLoading : Boolean ,
    email : String ,
    password : String ,
    onEmailChange : (String) -> Unit ,
    onPasswordChange : (String) -> Unit ,
    onLoginClick : () -> Unit ,
    onSignUpClick : () -> Unit ,
    error : String?)
{
if (isLoading) {
    LoaderDialog()
}

if (error != null) {
    FailureDialog(error)
}

Column(modifier = Modifier
    .fillMaxWidth()
    .background(MaterialTheme.colors.surface)
    .verticalScroll(rememberScrollState()))
{
    TopGreeting()

    LoginForm(email = email ,
              password = password ,
              onEmailChange = onEmailChange ,
              onPasswordChange = onPasswordChange,
              onLoginClick = onLoginClick)

    SignUpLink(Modifier.align(Alignment.CenterHorizontally), onSignUpClick = onSignUpClick)
  }
}