MobX不基于数组数据更新视图

我正在使用谷歌地图绘制一条多段线,它绑定到一个mobx可观察数组。如果我在加载页面时设置了值,这就可以工作了。但是当我更新折线值(route)时,图形不会得到更新。我认为这个问题与mobx有关,但我不确定。我找到这个了 Mobx Observable Array not updated 但没有成功。还有其他想法吗?

1. 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%` }} />}
                       />
   );
   

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());