React Nested Routing, the on clicking sub menu the content is not rendered

Question

I am doing a sample poc on nested routing.I have store page, which has 3 menus s1,s2,s3. The routing is happening properly, i.e. the urls is getting changed but the address div is not rendering

App.js

<Router>
    <Nav />
    <Routes>
      <Route path="/" exact element={<Home />} />
      <Route path="/store" element={<Store />}>
        <Route path="/store/:city" element={<Address />}></Route>
      </Route>
    </Routes>
  </Router>

Store.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom';

export default class Store extends Component {
  render() {

    return (
        <div>
            <ul className='nav justify-content-center'>
                <li className='nav-item'>
                    <Link to="/store/s1">City 1</Link>
                </li>
                <li className='nav-item'>
                    <Link to="/store/s2">City 2</Link>
                </li>
                <li className='nav-item'>
                    <Link to="/store/s3">City 3</Link>
                </li>
            </ul>
        </div>
    )
  }
}

Address.js

import React, { Component } from 'react'

export default class Address extends Component {
  address = {
    s1: {
        address: '123 ....',
        mail: '...@example.com',
        contact: '123-456-7890'
    },
    s2: {
        address: '456 ....',
        mail: 'delhi@example.com',
        contact: '987-654-3210'
    },
    s3: {
        address: '789 ....',
        mail: '...@example.com',
        contact: '567-890-1234'
    }
  };


  render() {
    console.log('ok')

    //const { address, mail, contact } = this.address[city];


    return (
        <div>
            <h5>Address Details for store</h5>
        </div>

    );
  }
}

The address component is never rendering. Even the console is never logged