React context API vs mobX?

export const CounterContext = React.createContext({
  counter: 0,
  increment: () => {},
});

import React from 'react';
import { CounterContext } from './context';

class Parent extends React.Component {
  increment = () => {
    this.setState(state => ({ counter: state.counter + 1 }));
  };

  state = {
    counter: 0,
    increment: this.increment,    
  };

  render() {
     return (
       <CounterContext.Provider value={this.state}>
         {/* ... */}
       </CounterContext.Provider>
     );
  }
}

import React from 'react';
import { CounterContext } from './context';

class SomeDeepChild extends React.Component {
  static contextType = CounterContext;

  render() {
    const { counter, increment } = this.context;
 
    return (
      <div>
        <h1>Counter value: {counter}</h1>
        <button onClick={increment}>increment</button>
      </div>
    );
  }
}