React + mobx , не работает обновление значений

уже всю голову сломал, почему может не работать обновление значений на странице. Observer добавил. Вот код представления

import React from 'react';
import './index.css'
import store from '../../store'
import cn from 'classnames'
import {observer} from "mobx-react";

const tabButtons = observer(() =>{
    return(
        <div className="tab-buttons">
            <div className={cn('tab-buttons__btn', {'active': !store.tabButtons.visibleMarkets})}
                 onClick={
                     ()=>{
                         store.tabButtons.hideMarkets()
                     }
                 }>Exchanges</div>
            <div className={cn('tab-buttons__btn', {'active': store.tabButtons.visibleMarkets})}
                 onClick={
                     ()=>{
                         store.tabButtons.showMarkets()
                     }
                 }>Markets</div>
        </div>
    )
});
export default tabButtons

а это код стора

import {makeObservable ,observable, action } from 'mobx';
class TabButtons{

    @observable visibleMarkets;
        constructor(){
            makeObservable(this);
            this.visibleMarkets = true
        }
    @action ('show markets')
    showMarkets () {
        this.visibleMarkets = true

    }
    @action ('hide markets')
    hideMarkets () {
        this.visibleMarkets = false
    }
}
const tabButtons = new TabButtons();
export default tabButtons;
export {TabButtons}