Angular 8.3 - Child not rendered, instead parent is being rendered

Question

I want to redirect from dashboard to map-view screen (child component), but for some reason getting amenity-booking screen(parent component) for split second.

this.loadingService.loadingOn();
      this.amenityService.getAllAmenitiesList(this.currentZone, 0, 500)
        .subscribe((response) => {
          const res = response['response'];
          if (res) {
            let filterConfig = res['content'].filter(ress => ress.id == element.gecId);
            this.amenityService.setMyAmenityObj(filterConfig[0]);
            this.route.navigate(["/layout/amenity-booking"], { skipLocationChange: true });
            setTimeout(() => {
              this.route.navigate(['/layout/amenity-booking/map-view'], { skipLocationChange: true });
            }, 500);
          }
        }, err => {
          this.loadingService.loadingOff();
        });

On removing the parent component, map-view screen is not rendered, instead amenity booking screen is appearing.

this.loadingService.loadingOn();
      this.amenityService.getAllAmenitiesList(this.currentZone, 0, 500)
        .subscribe((response) => {
          const res = response['response'];
          if (res) {
            let filterConfig = res['content'].filter(ress => ress.id == element.gecId);
            this.amenityService.setMyAmenityObj(filterConfig[0]);
              this.route.navigate(['/layout/amenity-booking/map-view'], { skipLocationChange: true });
          }
        }, err => {
          this.loadingService.loadingOff();
        });

Here's the routing module

// imports
export const routes: Routes = [
  {
    path: "",
    component: AmenityBookingComponent,
    children: [
     // various routes { path: "booking-type", component: BookingTypesComponent },
      { path: "map-view", component: MapViewComponent },
],
},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

I'm expecting to render the child component directly.