Как правильно передать данные хранящиеся в mobx, из родительского в дочерний?

Alexandroppolus, в дочернем по массиву products рендерятся карточки товаров и всё. Еще проводил такой эксперимент - менял page спустя n-секунд полсле загрузки страницы:
setTimeout(()=>{setPage(2)}, 3000)

При таком подходе данные попадают в дочерний. А если вручную менять page - нет.

Как правильно передать данные хранящиеся в mobx, из родительского в дочерний?

Alexandroppolus, да, отрабатывает. Данные и в стор попадают и в родительский компонент, если консолить. Но вот в дочерний никак, потому и спрашивал, как передавать правильно (мб что-то не так делаю думал). runInAction тоже пробовал - не помогает. Что бы runInAction не прописывать у меня mobx так настроен:

import {configure} from 'mobx'

configure({
  reactionScheduler: (f) => {
    setTimeout(f)
  },
})

В любом случае, спасибо. Ответ выходит не на поверхности, буду разбираться.

Как правильно передать данные хранящиеся в mobx, из родительского в дочерний?

Родительский компонент

export const Parent = observer(() => {
  ...
  const [page, setPage] = useState(parseInt(searchParams.get('page')) || 1)

	
  const fetchData = async () => {
    try {
      const {id} = await categoriesStore.getCategoryId({
        slug: categorySlug,
      })
      const feed = await productsFeedStore.getProductsFeed({
        filters: {
          category: {exact: id},
        },
        perPage: perPage,
        page: page,
      })
      return feed
    } catch (error) {
      console.error('Fetching data failure', error)
    }
  }

  useEffect(() => {
    const getFeed = async () => {
      const {results, count} = await fetchData()
      setProductsCount(count)

      if (isFirstRender) {
        const [minPrice, maxPrice] = calculatePriceRange(results)
        productsFeedStore.setFilters(minPrice, maxPrice)
        setMinPrice(minPrice)
        setMaxPrice(maxPrice)
      }
    }

    getFeed()
  }, [page, categorySlug])

  return (
    <>
	...
        <Children
          products={productsFeedStore.data}
          applyFilters={setFilters}
          minPrice={minPrice}
          maxPrice={maxPrice}
          feedFilters={productsFeedStore.filters}
          className={styles.productsFeed}
        />
        <Pagination
          totalRecords={productsCount}
          elementsPerPage={perPage}
          currentPage={page}
          changePage={setPage}
          className={styles.pagination}
        />
	...
    </>
  )
})

Стор

import {makeAutoObservable} from 'mobx'
import productsApi from 'src/api/products'

const productsFeed = makeAutoObservable({
  data: null,
  filteredData: null,
  filters: null,
  isLoading: false,
  error: null,

  getProductsFeed({filters, perPage, page}) {
    this.data = null
    this.error = null
    this.isLoading = true
    return new Promise((resolve) => {
      productsApi
        .getProductsFeed(filters, perPage, page)
        .then((data) => {
          this.isLoading = false
          this.data = data.results
          resolve(data)
        })
        .catch((error) => {
          this.isLoading = false
          this.error = error
        })
    })
  },
})

export default productsFeed

Проблема в том, что когда изменяется page и срабатывает эффект, в дочерний приходит null(в products props), но обновленные данные не приходят. Data в productsFeed - это массив.

Как правильно передать данные хранящиеся в mobx, из родительского в дочерний?

Тоже ожидаю такое поведение , но почему-то этого не происходит :/