Как обрабатывать ошибки рендеринга компонентов React, когда этот компонент отображается в компоненте Angular?

Question

Я сделал компонент React для обработки ошибок, когда что-то идет не так при рендеринге компонентов.Например, это выглядит так:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true
    };
  }

  componentDidCatch(error, info) {
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1 > Something went wrong. < /h1>;
    }

    return this.props.children;
  }
}

И у меня проблема, потому что в приложении, над которым я работаю, все еще есть угловые компоненты, использующие компоненты React, и я рендеринг их так:

ReactDOM.render((someReactComponent, {props}), document.getElementById('stringId')

Проблема в том, что я не знаю, как использовать "ErrorBoundary" в этом случае.Обычно в другом компоненте React я просто оборачиваю все элементы рендеринга в 'ErrorBoundary', но в этом случае это не так просто сделать.Кто-нибудь может мне помочь?