React mobx, компонент не отображает новый наблюдаемый

Я использую Mobx с React (машинописный текст), чтобы получить данные из firebase и отобразить их. при первом рендеринге никакие данные не отображаются на экране, пока я не изменю, например, вкладки с учетом того, что компонент будет повторно визуализирован.

• класс компонента:

  interface Props {id: string; mytore?: MyStore;}
  @inject('mystore')
  @observer
  export class myClass extends Component<Props>{
    constructor(props: Props) {super(props);}
    componentDidMount() {   this.props.mystore!.getBs(this.props.id);}
    render() {
       const { arrB } = this.props.mystore!;
       return (
          <div>{arrB.map((e) => (<h3 key={`${e.id}`}>{e.name}</h3>))}</div>
          );
       }
  }
  

• класс магазина

  export class MyStore{
  @observable arrA=[];
  @observable arrB=[];
  
  constructor(){this.loadAllAs()}
  
  @action.bound loadAllAs(){runInAction(async()=>(this.arrA=await /*fetchfunction*/))}
  
  @action getBs(id){this.arrB=arrA.filter(/*some logic*/)}
  }
  

  поэтому здесь arrB манипулируют после вызова метода, и это наблюдаемый объект, который получает деструкции в методе рендеринга компонента, поэтому я ожидал каких-либо изменений в arrB результате повторного рендеринга, но ничего не происходит до тех пор, пока не будут вызваны другие действия componentDidMount .