Using instaed of causes the app to crash on using BottomNav and jetpack navigation

Question

I am creating an app with a BottomNavigationView.

I am using JetpackNavigation and kotlin.

I have set up my XML as

<fragment
        android:id="@+id/fragNavHost"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavView"
        app:navGraph="@navigation/bottom_nav_graph"
        tools:layout_editor_absoluteX="0dp" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavView"
        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/bottom_nav_menu">

But I'm getting a Replace the <fragment> tag with FragmentContainerView. suggestion message from the Android Studio suggestions

The app breaks when using FragmentContainerView but runs perfectly on using fragment

The error I'm getting is

Unable to start activity ComponentInfo{com.example.reportbusterclone/com.example.reportbusterclone.view.MainActivity}: java.lang.IllegalStateException: Activity com.example.reportbusterclone.view.MainActivity@f462d5a does not have a NavController set on 2131296446

even though only the tag changes and nothing else.