MobX not updating view based on array data

Question

I am using the react-google-maps to draw a polyline which is bound to a mobx observable array. This works if I set the values when the page is being loaded. But when I update the polyline value (route) the graph doesn't get updated. I think the problem is related to mobx not sure though. I found this Mobx Observable Array not updated but without success. Any other ideas?

1. Incomplete parts from the main.tsx file, to give some ideas about the structure...

   export const Main = observer(() => {
            const mainState = useContext(MainState);
   
            const MapWithARoute = withScriptjs(
           withGoogleMap((props) => (
               <GoogleMap defaultZoom={12} defaultCenter={mainState.center}>
                   <Polyline
                       path={mainState.route}
                       options={{
                           strokeColor: '#FF0000',
                           strokeOpacity: 1,
                           strokeWeight: 6,
                           icons: [
                               {
                                   offset: '0',
                                   repeat: '10px'
                               }
                           ]
                       }}
                   />              
               </GoogleMap>
           ))
       );
       }
   
   return (
           <MapWithARoute
                    googleMapURL="https://maps.googleapis.com/maps/api/js? 
                   key=mykey&v=3.exp&libraries=geometry,drawing,places"
                           loadingElement={<div style={{ height: `100%` }} />}
                           containerElement={<div style={{ height: `400px` }} />}
                           mapElement={<div style={{ height: `100%` }} />}
                       />
   );
   

Inside MainState.tsx

import { createContext } from 'react';
import { decorate, observable } from 'mobx';

export class MainState {        
    route: any = [];
    center: any = { lat: 59.95, lng: 30.33 };
}

decorate(MainState, {
    route: observable,
    center: observable
});

export default createContext(new MainState());