Nested Routes - Vue 3.3.4, Vue-Router 4.2.5 doesn't render router view

Question

I am trying to play around with the Nested routes and came to an issue that the nested routes are not rendered on the component page.

//index.js - routes    
//Define routing rules
import { createRouter, createWebHistory } from "vue-router";
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import CarView from '../views/CarView.vue'
import ContactView from '../views/ContactView.vue';

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: "/",
            name: 'home',
            component: HomeView
        }, {
            path: '/about',
            name: 'about',
            component: AboutView
        },
        {
            path: '/cars/:id',
            name: 'car',
            component: CarView,
            children: [
                {
                    path: 'contact',
                    name:'contact',
                    component: ContactView
                }
            ]
        }
    ]
});

Below is the component file where the router view is to be rendered. //Component File

import { RouterView, useRoute} from 'vue-router';
import cars from '../data/cars.json';

const route = useRoute();

const car = cars.find(c => c.id == parseInt(route.params.id));

</script>

<template>
    <div>
        <h1>Car View</h1>
        <p>{{ car.name }}</p>
        <p>{{ car.price }}</p>
        <p>{{ car.year }}</p>
        <RouterView />
    </div>
</template>