Изменения магазина Mobx не обновляются в других компонентах NextJS

Question

Я пытаюсь реализовать MobX в своем следующем Js приложении без декораторов, но когда я изменяю данные хранилища в одном компоненте, он не изменится в другом компоненте, но когда я использую декораторы, он отлично работает.

CompanyStore. js

import {configure, action, observable, runInAction, decorate, computed} from "mobx"
import { useStaticRendering } from 'mobx-react'

const isServer = typeof window === 'undefined'
// eslint-disable-next-line react-hooks/rules-of-hooks
//useStaticRendering(isServer)
//configure({enforceActions: "observed"});

export class CompanyStore{

    companies;

    constructor() {        
        this.companies = [];
    }

    addCompany = (company) => {
        this.companies.push(company);
    }
}

decorate(CompanyStore, {
    companies: observable,
    addCompany: action
});


export async function fetchInitialCompanyState() {
    // You can do anything to fetch initial store state
    return {}
}

_app. js файл

import App from 'next/app'
import React from 'react'
import {  CompanyStore , fetchInitialCompanyState,} from '../stores/CompanyStore'
import { Provider } from 'mobx-react'

class MySampleApp extends App{
    state = {
        store: new CompanyStore(),
    }

    static async getInitialProps(appContext) {
        const appProps = await App.getInitialProps(appContext)
        const initialCompanyState = await fetchInitialCompanyState()

        return {...appProps, initialCompanyState }
    }

    static getDerivedStateFromProps(props, state) {
        state.store.addCompany("India")
        return state
    }

    render() {
        const { Component, pageProps } = this.props
        return (
            <Provider CompanyStore={this.state.store}>
                <Component {...pageProps} />
            </Provider>
        )
    } 
}

export default MySampleApp

индекс. js файл

import {Company} from "../component/Company"
import {Branch} from "../component/Branch"

export default function Index() {

    return (
        <div>
            <Company></Company>
            <Branch></Branch>
        </div>
    );
}

Компания. js Файл компонента

import React from 'react'
import Link from 'next/link'
import { inject, observer } from 'mobx-react'

export class Company extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            name: ''
        };

        this.handleChange = this.handleChange.bind(this);
        this.saveCompany = this.saveCompany.bind(this);

    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }

    saveCompany = (e) => {
        e.preventDefault();
        this.props.CompanyStore.addCompany(this.state.name);
        this.setState({name: ''})
    }


    handleChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }


    render() {

        const {CompanyStore} = this.props;

        return (
            <div>
                <h1>Company: {CompanyStore.companyCount}</h1>

                <form onSubmit={e => this.saveCompany(e)}>
                    <input type="text" name="name" onChange={this.handleChange} />
                    <button>Add Company</button>
                </form>

                <ul>
                    {
                        CompanyStore.companies.map(company => (
                        <li key={company}>{company}</li>
                        ))
                    }
                </ul>

            </div>
        )
    }
}

Company = inject('CompanyStore')(observer(Company))

Филиал. js компонент

import React from 'react'
import Link from 'next/link'
import { inject, observer } from 'mobx-react'

export class Branch extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {

    }

    componentWillUnmount() {

    }


    render() {

        const {CompanyStore} = this.props;
        console.log("cm", CompanyStore);
        return (
            <div>
                <h1>Branch:</h1>
                <ul>
                    {
                        CompanyStore.companies.map(company => (
                            <li key={company}>{company}</li>
                        ))
                    }
                </ul>

            </div>
        )
    }
}

Branch = inject('CompanyStore')(observer(Branch))

Заранее благодарим за любую помощь.