Как заменить фрагмент внутри другого фрагмента в Kotlin?

Question

Итак, я использую последнюю версию androidstudio и kotlin.

Я создал нижний проект навигации и использую действие с кодом, сгенерированным по умолчанию.

Я хочу открыть / заменить фрагмент из другого фрагмента кнопкой. Но предыдущий фрагмент не исчезает, когда появляется новый фрагмент, поэтому оба видны.

Я много читаю, но я не знаю решения, пожалуйста, помогите мне с несколькими советами.

Это мой MainActivity

override fun onCreate(savedInstanceState: Bundle ? ) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val navView: BottomNavigationView = findViewById(R.id.nav_view)

    val navController = findNavController(R.id.nav_host_fragment)
    // Passing each menu ID as a set of Ids because each
    // menu should be considered as top level destinations.
    val appBarConfiguration = AppBarConfiguration(setOf(
        R.id.navigation_advertisements, R.id.navigation_own_advertisements, R.id.navigation_chat, R.id.navigation_party, R.id.navigation_settings))
    setupActionBarWithNavController(navController, appBarConfiguration)
    navView.setupWithNavController(navController)
}

И это мой фрагмент

override fun onViewCreated(view: View, savedInstanceState: Bundle ? ) {
    super.onViewCreated(view, savedInstanceState)

    button.setOnClickListener {
        activity!!.supportFragmentManager
            .beginTransaction()
            .replace(R.id.nav_host_fragment, ChatFragment())
            .commit()
    }
}