Mobx-react observer not syncing with view React Router

Question

I have been able to use mobx successfully with my regular pages, but i had this complex page i wanted to create, so i decdied to embed 's within the component render which worked perfectly.

render = () => (
  <InAppLayout fullWidth noPageTitle role={Constants.userRoles.hospital}>
    <SplitView list={this._renderList()}
      headerList={this._renderDoctorMenu()}
      headerSlotContent={this._renderHeader()}
      loading={HospitalStore.doctorsLoading}>
        <Switch>

          <Route exact path={`${this.state.pageBaseLink}`} 
                render={()=><div className="no-result">
                              <h1>No Doctor has been selected</h1>
                            </div>} 
          />

          <Route path={`${this.state.pageBaseLink}create_new`} 
            component={()=> <AddDoctor /> } 
          />

          <Route path={`${this.state.pageBaseLink}:id/schedule`} 
            component={()=> <DoctorSchedule /> 
          }/>

          <Route path={`${this.state.pageBaseLink}:id`} 
            component={({match})=><DoctorCalendar />} 
          />

          </Switch>
    </SplitView>
  </InAppLayout>
)

I am making use of create react app, so this is how i use my observers

const Doctors = observer(
  class Doctors extends HospitalBase {

It has worked well for me for my previous pages, but in this particular case its not working and i don't know why. It works when i navigate to the page from another one, but when i visit the page via the link or refresh the page the observer stops working and my data doesn't sync.