MVP pattern implementation in ReactJs, caveats?

I’m trying different MVP implementations in React, to solve the issue of Presenter sending data to View in adhoc manner.

Here is what I came to:

The state in the wrapper index.jsx is used to get the data from presenter to View.
So that View doesn’t have to handle getting data from presenter in its own state or subscribe to streams.

What considerations or caveats one should think of?

src
  -Counter
        -index.jsx
        -presenter.js
        -View.jsx
  -App.jsx

index.jsx

import React, { useState, useMemo } from 'react';

import Presenter from './presenter';
import View from './View';

export default function index(props) {
  // presenterData is a state updated by presenter to send its content to View.
  const [presenterData, setPresenterData] = useState({});

  // setPresenterData is sent to presenter to update whatever need updating.
  const presenter = useMemo(() => {
    return new Presenter(setPresenterData);
  }, []);
  // View takes presenter to talk to, and takes presenterData to read
  // upon change.
  return <View {...props} presenter={presenter} presenterData />;
}

presenter.js

export default class Presenter {

  // presenter gets setPresenterData to update parent component thus the view.

  constructor(setData) {

    // the props is all the variables that we want to communicate to View
    this.props = {
      text: 'aus',
      numbers: 123,
      obj: {
        a: 1,
        b: 2,
      },
    };
    this.interval;
    this.setData = setData;
  }

  inc = () => {
    this.interval = setInterval(() => {

      // whenever props (data to View) is changed
      // setPp is called to update View.

      this.props.numbers++;
      this.setData({ ...this.props });

    }, 1000);
  };

  stop = () => {
    clearInterval(this.interval);
  };
}

View.jsx

import React from 'react';

export default function View(props) {

  // this way the view doesn't need to keep state for presenter variables.
  // Nor does it need to subscribe or send callbacks.
  // Even cleanup is already arranged by parent component.

  return (
    <div>
      <div>{props.pp.numbers}</div>
      <button onClick={props.presenter.inc}>aaaa</button>
      <button onClick={props.presenter.stop}>Stop</button>
    </div>
  );
}