How to replace the fragment from an activity

Question

I created a project in AS with bottom navigation, then added a recycler view to display some movies from TMDB API, now I want to change the fragment when I click on item. I've implemented the method onClickItem, tried to change the fragment but the new fragment is added on top of the current fragment

before I click an item :

and after I click on one of the items:

Notice that on top of the Spider-Movie appears the text from the new fragment

This is how I "replace" the fragment (this function is inside HomeFragment:

        popularMoviesAdapter.onItemClick = { movie ->
            Log.d("onItemClick", movie.title)

            activity?.supportFragmentManager?.beginTransaction()
                ?.replace(R.id.nav_host_fragment_activity_main, MovieFragment())?.commit()
        }

EDIT

This is my fragments component tree:

and I've changed the above .onClickItem with this:

      var navController =  view?.findNavController()
            popularMoviesAdapter.onItemClick = { movie ->
                var opt = HomeFragmentDirections.actionNavigationHomeToNavigationMovie()
                navController?.navigate(opt)
            }