Ember rootURL based navigation

I have been a backend developer and I am currently dabbling with Ember code. I have a requirement such that two ember apps should be served from same domain.

Referred this: https://guides.emberjs.com/release/configuring-ember/embedding-applications/#toc_specifying-a-root-url

Lets say I am serving the website from http://example.com

App1 is served from http://example.com/foo/

App2 is served from http://example.com/bar/

Here is the sample configuration I used for environment.js:

App 1:

let ENV = {
    modulePrefix: 'my-app',
    environment,
    rootURL: '/foo/',
    locationType: 'hash'
}

App 2:

let ENV = {
    modulePrefix: 'my-app',
    environment,
    rootURL: '/bar/',
    locationType: 'hash'
}

After making these changes I expect them to work fine. But whenever I visit App2 served from http://example.com/bar/#route/route-page, it is showing rootURL as /foo/ in ember-inspector.

Help would be much appreciated to route them accordingly. Thank You!