Navigation Components Child NavHost Fragments' view not shown in Parent NavHost Fragment View

Question

I am working on a project which has 2 NavHost Fragments. The First/Parent NavHost Fragment is attached to the Main Activity XML file and shows destinations like Login Fragments and Register Fragment based on a Parent Navigation Graph.

Now when a user signs in, new Navhost Fragment or Child Navhost Fragment which is attached to another XML file and associated with another Navigation Graph or Child Nav Graph Kicks in.

The problem I'm facing is instead of showing the second view, that is; the view associated with the child NavHost Fragment xml file, the app shows child Nav Graph destinations within the Parent NavHost Fragment. It completely ignores the XML of Child NavHost Fragment file.

Main Activity XML

<?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"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_green_light">


    <fragment
        android:id="@+id/navHostFragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph" />

</androidx.constraintlayout.widget.ConstraintLayout>

Child Fragment Container XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/holo_blue_light"
        android:layout_margin="24dp"
        android:padding="@dimen/dimen_24dp">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:translationZ="@dimen/dimen_1dp"
            app:elevation="@dimen/dimen_0dp">

            <include layout="@layout/toolbar" />

        </com.google.android.material.appbar.AppBarLayout>

        <fragment
            android:id="@+id/nestedNavHost"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            app:defaultNavHost="true"
            android:layout_height="wrap_content"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
            app:navGraph="@navigation/restaurant_nav_graph" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/drawerNavView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_view_header"
        app:menu="@menu/drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

As in the code above, the Toolbar, Drawer Layout, Padding etc in the child navhost xml file is completely ignored

Any help would be appreciated to resolve the issue.