Why is the error boundary not triggering in the react component?

I have introduced a basic error by accessing property length of null, in my component called App2. But my errorboundary is not triggering for the same. Here is the example live https://codepen.io/abhinavthinktank/pen/gEePPe. Im not sure why this behaviour is happening

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

  componentDidCatch() {
    // Display fallback UI
    this.setState({ hasError: true });
  }

  render() {
    const { hasError } = this.state;
    const { children } = this.props;
    if (hasError) {
      return <div>ERRRORRRRRRRRRRRRRRRRRRRRRRRRRRR</div>;
    }
    return children;
  }
}


class App extends React.Component {
  render() {
    let test2 = null;
    return (
      <div>
        {test2.length}
        <h1>Hello, React and ES6!</h1>
        <p>Let's play. :)</p>
      </div>
    );
  }
}

const App2 = props => {
  return(
  <ErrorBoundary>
    <App/>
    </ErrorBoundary>
    )
}

ReactDOM.render(<App2 />, document.getElementById("app"));