Проблемы с магазином MobX при использовании Material-table

Question

Мне нужно найти решение, используя MobX, React и Material-table, как постоянно сохранять данные каждый раз, когда я делаю изменения (обновление строки, добавление строки и удаление строки), используя хранилище Mobx с декоратором @action в хранилище. Проблема в том, что каждый раз, когда я добавляю новые данные и обновляю sh страницу, новые данные исчезают.

У кого-нибудь есть решение, как реализовать это решение в приведенном ниже коде?

Компонент: TableMake. js

import React from 'react';
import MaterialTable from 'material-table';
import '../layouts/Tables.css';
import { inject, observer } from 'mobx-react';
import VehicleMakesStore from "../stores/VehicleMakes";

export default inject('VehicleMakes')(observer(function TableMake(props) {

    console.log(props);
    const store = new VehicleMakesStore();
    console.log(JSON.stringify(store.allVehicleMakes));

    const [state, setState] = React.useState({  
        columns: [
            { title: 'ID', field: 'id' },
            { title: 'Name', field: 'name' },
            { title: 'Production', field: 'year' },
            { title: 'ABRV', field: 'abrv' },
        ],
        data: store.allVehicleMakes

    });

    return (

        <MaterialTable      

            title="Vehicles Table"
            columns={state.columns}
            data={state.data}
            editable={{

                onRowAdd: newData =>
                    new Promise(resolve => {
                        setTimeout(() => {
                            resolve();
                            setState(prevState => {
                                const data = [...prevState.data];
                                data.push(newData);           
                                return { ...prevState, data };
                                    });                                      
                        }, 600);
                    }),

                onRowUpdate: (newData, oldData) =>
                    new Promise(resolve => {
                        setTimeout(() => {
                            resolve();
                            if (oldData) {
                                setState(prevState => {
                                    const data = [...prevState.data];
                                    data[data.indexOf(oldData)] = newData;
                                    return { ...prevState, data };
                                });
                            }
                        }, 600);
                    }),

                onRowDelete: oldData =>
                    new Promise(resolve => {
                        setTimeout(() => {
                            resolve();
                            setState(prevState => {
                                const data = [...prevState.data];
                                data.splice(data.indexOf(oldData), 1);
                                return { ...prevState, data };
                            });
                        }, 600);
                    }),
            }
            }
        />
    );
    }          
)          
);

Магазин: VehicleMakes. js

import { observable } from 'mobx';
import { Component } from "react";


class VehicleMakes extends Component {


@observable allVehicleMakes = [

        { name: 'Opel Ampera', id: '03246', abrv: 'OP - AM', year: 2011 },
        { name: 'Opel Tigra', id: '03244', abrv: 'OP - TI', year: 2000 },
        { name: 'Opel Karl', id: '03224', abrv: 'OP - KA', year: 2015 },
        { name: 'Mazda Challenge', id: '02244', abrv: 'MA - CH', year: 2017 },
        { name: 'Mazda3 Sedan', id: '01244', abrv: 'MA - SE', year: 2018 },
        { name: 'Ford Mondeo', id: '74565', abrv: 'FO - MO', year: 2017 },
    ]; 

} 
export default VehicleMakes;