Mobx / React update issue

I'm just learning Mobx and I'm trying to get this component to update with no luck. It seems like it should update, it just doesn't. What am I missing?

'use strict';

const observer = mobxReact.observer;
const makeAutoObservable = mobx.makeAutoObservable;
const isObservable = mobx.isObservable;
const isObservableProp = mobx.isObservableProp;
const configure = mobx.configure;

configure({
  // This gives you good warnings to read in the console
  // enforceActions: "always",
  computedRequiresReaction: true,
  reactionRequiresObservable: true,
  observableRequiresReaction: true,
  disableErrorBoundaries: true
});

const HeadingBug = observer(function ({heading}) {
  return React.createElement("span", null, "This is the heading bug. Current value: ", heading);
});

let heading = makeAutoObservable({
  value: 100
});

ReactDOM.render(React.createElement(HeadingBug, {
  heading: heading.value
}), document.getElementById('root'));

setTimeout(() => {
  console.log(`isObservable: ${isObservable(heading)}`);
  console.log(`isObservableProp: ${isObservableProp(heading, 'value')}`);
  console.log('Changing Heading to 200');
  heading.value = 200;
}, 2000);

Codepen: https://codepen.io/mtwomey/pen/qBNLwXz

You are dereferencing heading.value too early here:

ReactDOM.render(React.createElement(HeadingBug, {
  heading: heading.value
}), document.getElementById('root'));

You basically passing primitive number value inside your observer component, not observable value.

To fix it just pass whole heading object as a prop and use value inside heading component, like so:

const HeadingBug = observer(function ({heading}) {
  return React.createElement("span", null, "This is the heading bug. Current value: ", heading.value);
});

More info here: https://mobx.js.org/understanding-reactivity.html