Как перехватить наблюдаемые обновления Mobx в постоянном компоненте NextJS React Audio Player?

У меня есть приложение для реакции аудиоплеера на стороне сервера.

Используя пользовательский _app.js NextJS, у меня есть постоянный компонент AudioPlayer, в котором я хочу вызывать внутреннюю функцию this.play(mp3url) всякий раз, когда @observable playerData = {} изменяется в хранилище mobx.

Я успешно нажимал кнопки на других компонентах в моем приложении, обновляя playerData, когда это необходимо.

Но я не могу обнаружить эти обновления внутри моего компонента AudioPlayer, поэтому я могу установить его состояние и вызвать this.play(mp3url), чтобы начать воспроизведение звука.

страницы/_app.js

import initializeStore from '../stores/stores';

export default class MyApp extends App {

  static async getInitialProps(appContext) {
    const mobxStore = initializeStore();
    appContext.ctx.mobxStore = mobxStore;
    const appProps = await App.getInitialProps(appContext);
    return {
      ...appProps,
      initialMobxState: mobxStore,
    };
  }

  constructor(props) {
    super(props);
    this.mobxStore = props.initialMobxState;
  }

  render () {
    const { Component, pageProps } = this.props
    return (
      <Provider {...this.mobxStore}>
          <Component {...pageProps} />
        { this.mobxStore.playerStore.playerActive && <AudioPlayer /> }
      </Provider>
    )
  }
}

компоненты/AudioPlayer.js

import ReactPlayer from 'react-player'
import { inject, observer } from 'mobx-react'

@inject('playerStore')
@observer
class Player extends Component{
    constructor(props) {
        super(props)
        this.state = {
            url: null,
            image: null
        }
    }
    componentWillUpdate(nextProps) {
        this.setState({
            url: nextProps.playerStore.playerData.url,
            image: nextProps.playerStore.playerData.image
        }, () => { this.play(this.state.url) })
    }

    // ...Other react-player functions

    render() {
        <ReactPlayer 
        {/* ...required props... */}
        />
    }
}

Так как же заставить этот постоянный аудиоплеер обнаруживать изменения в наблюдаемом mobx для воспроизведения URL-адресов аудио?

На данный момент componentWillReceiveProps, componentWillUpdate или componentDidUpdate не вызываются. componentDidMount вызывается ровно один раз, как и ожидалось, когда я устанавливаю @observable playerActive = true