Android bottom navigation not changing destination

I was trying to implement a simple bottom navigation view using android's navigation, but I think I'm missing a step.

Here's what I did:

At first I created four fragments. These fragments contain only a text view.

Then I created a navigation graph. The code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.baba_abdullah.Project.fragment.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/addBooksFragment"
        android:name="com.example.Project.fragment.AddBooksFragment"
        android:label="fragment_add_books"
        tools:layout="@layout/fragment_add_books" />

    <fragment
        android:id="@+id/chatFragment"
        android:name="com.example.Project.fragment.ChatFragment"
        android:label="fragment_chat"
        tools:layout="@layout/fragment_chat" />

    <fragment
        android:id="@+id/profileFragment"
        android:name="com.example.Project.fragment.ProfileFragment"
        android:label="fragment_profile"
        tools:layout="@layout/fragment_profile" />
</navigation>

Menu file:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/home_fragment"
        android:icon="@drawable/ic_baseline_home_24"
        android:title="@string/home_menu_title"/>
    <item
        android:id="@+id/add_book_fragment"
        android:icon="@drawable/ic_baseline_add_circle_outline_24"
        android:title="@string/add_book_menu_title"/>
    <item
        android:id="@+id/chat_fragment"
        android:icon="@drawable/ic_baseline_chat_bubble_outline_24"
        android:title="@string/chat_menu_title"/>
    <item
        android:id="@+id/profile_fragment"
        android:icon="@drawable/ic_baseline_account_circle_24"
        android:title="@string/profile_menu_title"/>
</menu>

Inside the layout file of MainActivity, I added a FragmentContainer that would serve as NavHostFragment and a BottomNavigationView in the following way:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/main_fragment_container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottom_nav_bar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/main_nav_graph" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/main_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

And in the MainActivity, I added the following lines to tie them up together:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        NavHostFragment navHostFragment = (NavHostFragment) getSupportFragmentManager().findFragmentById(R.id.main_fragment_container);
        NavController navController = navHostFragment.getNavController();
        BottomNavigationView bottomNav = findViewById(R.id.bottom_nav_bar);
        NavigationUI.setupWithNavController(bottomNav, navController);
    }

Now, when I click on other menu item, it doesn't get selected and the destination view isn't changed either.

You can check the screen recording of the bahaviour of the output app.

What am I missing here?

to connect bottom navigation id of fragments most be equal with menu id, here is how need to be your navigation graph

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_nav_graph"
    app:startDestination="@id/home_fragment">

    <fragment
        android:id="@+id/home_fragment"
        android:name="com.baba_abdullah.Project.fragment.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" />

    <fragment
        android:id="@+id/add_book_fragment"
        android:name="com.example.Project.fragment.AddBooksFragment"
        android:label="fragment_add_books"
        tools:layout="@layout/fragment_add_books" />

    <fragment
        android:id="@+id/chat_fragment"
        android:name="com.example.Project.fragment.ChatFragment"
        android:label="fragment_chat"
        tools:layout="@layout/fragment_chat" />

    <fragment
        android:id="@+id/profile_fragment"
        android:name="com.example.Project.fragment.ProfileFragment"
        android:label="fragment_profile"
        tools:layout="@layout/fragment_profile" />
</navigation>