MobX Observable map that stores observables maps - reactjs

Question

Is this the correct way to store multiple observable maps within a store.
I'm relatively new to working with observables and MobX. I have a store for any maintenance domain object. For example "Institution Types". Instead of using a map for each I initiate a new map based off of an enum created:
maintenanceRegistry = new Map<string, any>();
selectedMaintenanceList = new Map<string, any>();
constructor() {
makeAutoObservable(this);
Object.values(MaintenanceTypeEnum).forEach((value) => {
this.maintenanceRegistry.set(value, new Map<string, any>());
});
}
And then on my onClick I set the selectedMaintenance map using the enum as the key:
if (maintenanceRegistry.get(MaintenanceTypeEnum.InstitutionTypes).size <= 1) {
loadMaintenance<InstitutionType>({apiPath: '/institutionTypes'});
} else {
setSelectedMaintenanceList(MaintenanceTypeEnum.StructureCategories);
}
When I load the data it updates my table and values however when the data has already been fetched the table data is not being updated.
To fetch the data I am using a computed function:
get maintenanceValues() {
var mv: any[] = [];
[...this.selectedMaintenanceList.values()].map((value: {value: any}, i) => {
mv.push(value);
})
return mv;
}
and then I map the data without the id property as its a guid and unnecessary:
const data = (maintenanceValues).map(value => {
const { id, ...noId } = value;
return noId
})