Unable to integrate a React ErrorBoundary

I have an ErrorBoundary class (ErrorBoundry.jsx) that looks like this:-

import React, { Component } from 'react'
import ErrorPage from '../../ErrorPage'

const WithErrorBoundary = ({ renderError } = {}) => {
    return WrappedComponent => {
        return class ErrorBoundary extends Component {
            state = { error: null }

            componentDidCatch(error, errorInfo) {
                this.setState({ error })
            }

            render() {
                if (this.state.error) {
                    return <ErrorPage />
                }

                return <WrappedComponent {...this.props} />
            }
        }
    }
}

export default WithErrorBoundary;

The fallback UI (ErrorPage) looks like this:-

import React from 'react';
import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import Logo from '../../../../../images/logo.svg';
import styles from './styles.module.css';

export default function ErrorPage(props) {
    const { t } = useTranslation('common');

    return (
      <>
        <div className={classNames('navbar', 'navbar-fixed-top', styles.headerSection)}>
          <div className={classNames('col-md-12', 'col-xs-12' , styles.logoSection)}>
            <span className={styles.logo}>
              <img className='img-fluid' src={Logo} alt='Logo' />
            </span>
          </div>
        </div>
        <div className={styles.content}>
            <div className={styles.unavailableDiv}>
                <h1>{t('unavailable_page_title')}</h1>
                <p>{t('unavailable_page_message_1')}</p>
                <p>{t('unavailable_page_message_2')}</p>
            </div>
        </div>
      </>
    );
};

I am wrapping my routes in app.jsx with the ErrorBoundary like this:-

const ErrorBoundary = lazy(() => import('./components/core/ErrorBoundary/ErrorBoundry'));

<ErrorBoundary>
      <Switch>
              <Redirect from='/' to='/notfound' exact />
              <Redirect from='/:country/ord' to='/notfound' exact />
              <Route path='/notfound' component={NotFound} />

              <PrivateRoute path='/:country/' exact component={Payment} />
              <PrivateRoute path='/:country/:encryptedParams' exact component={DetailPage} />
               <Route component={NotFound} />
       </Switch>
</ErrorBoundary>

When I run my app, I get a blank page with a console error:- Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

I went through the answers in Functions are not valid as a React child. This may happen if you return a Component instead of from render, but they didn't quite help me. Where exactly am I going wrong?