React.js and DevExtreme library - singleton pattern problem/solution

At the beginning I want to point out that this question is specific and maybe dumb - and I know it but I really need to know every positive (if exists) and negative aspect of that solution.

To the point: I am developing huge React.js appliaction on top of DevExtreme library. There are tons of limitations due to this library. One of the biggest: editing forms cannot be controlled - setState/dispatch/selector causes multi-rerender etc - it's just impossible and official reply from support also says that with this component it is just impossible.

So if saving to any kind of React state is impossible I've came up with an idea of "singleton-like" solution that looks like this:

class Singleton {
  constructor() {
    this.data = []
  }

  setData(data) {
    this.data = data; 
  }

  getData() {
    return this.data; 
  }
}

const singletonDataInstance = new Singleton(); 
export default singletonDataInstance;

React doesn't recognize that this is some global state (I have access to those methods and fields anywhere where I import its instance) and thanks to this React doesn't re-render my Form DevExtreme component (i need this data only to send some info to backend).

BUT I feel like this is massive anti-pattern in React so if someone can explain why this is such a bad practice (or not) I would be greatfull.

Thanks!