Sending props to React component from nested MobX store is not working?

Question

I'm new to MobX and I'm looking into concept of using root store and having children and grandchildren stores. However, what I'm not sure is whether it's possible to have a following store structure (this is my RootStore.js file):

class RootStore {
    constructor(){
        this.vehicleMakeModuleStore = new VehicleMakeModuleStore(this)
    }

    @observable cars = [ array of objects ]
}

class VehicleMakeModuleStore {
    constructor(rootStore){
        this.rootStore = rootStore
        this.vehicleMakeListViewStore = new VehicleMakeListViewStore(this)
    }
}

class VehicleMakeListViewStore {
    constructor(vehicleMakeModuleStore){
        this.vehicleMakeModuleStore = vehicleMakeModuleStore
    }

    @computed get listMakes(){
        const matchesFilter = new RegExp(this.filter, "i")
        return this.rootStore.vehicleMakeModuleStore.cars.filter(car => car !== null).filter(car => 
        !this.filter || matchesFilter.test(car.VehicleMake))
    }
}

const rootStore = new RootStore()
export default rootStore

As you can see I'm trying to make vehicleMakeModuleStore a child of rootStore and vehicleMakeListView a grandchild of rootStore, thus a child of vehicleMakeModuleStore. Data from cars array in rootStore would flow through vehicleMakeModuleStore to be shown in vehicleMakeListView. I am aware this structure is complicated and since I receive error Maximum call stack size exceeded in my React component when I try to show computed listMakes() it's possible I'm doing this approach in a completely wrong way.

This is how I wrapped it up inside Provider in index.js:

const Root = (
    <Provider 
        rootStore={rootStore}
        vehicleMakeModuleStore={rootStore.vehicleMakeModuleStore}
        vehicleMakeListViewStore={rootStore.vehicleMakeModuleStore.vehicleMakeListViewStore}
    >
        <App/>
    </Provider>
)

And this is how my React component looks like, simplified:

@inject('rootStore', 'vehicleMakeModuleStore', 'vehicleMakeListViewStore')
@observer 

class VehicleMakeList extends Component {
    render(){
       return(
          <div className="carsDiv">
                    {this.props.rootStore.vehicleMakeModuleStore.vehicleMakeListViewStore.listMakes.map((make) => (
                        <div key={make.id} className="car"> 
                         (mapped data)
                        </div>
                    ))}
                </div>
       )
    }
}

I have no idea how to have grandchild stores which will still be able to read data from their grandparent (rootStore) and if it's even possible, or should I simply create vehicleMakeListViewStore inside rootStore. Thanks in advance!