You can look at the issue via codesandbox
-----------------------------------------

Codesandbox: <https://codesandbox.io/s/great-frog-m2s7h>

Context
-------

I am trying to fetch some data and populate some variable and render the value in React, essentially following the documentation await/async + runInAction example: <https://mobx.js.org/actions.html#asynchronous-actions>

However, when the data is fetched, React actually does not re-render. However, if you edit the text in there(i.e. change `hi` to `his` or whatever, then you see the correct value appear.

Problem
-------

What exactly am I doing wrong with the data fetching? Why isn't the observable value not being re-rendered correctly when its been assigned a value after some data has been fetched?