Error Boundary in React 18 not working when child component has an error

Question

I have an MFE app that is consuming a component from another project. This is my error boundary component:

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

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

  componentDidCatch(error, errorInfo) {
    console.log(error, errorInfo);
  }

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

    // If I comment this line out, it doesn't render anything but it doesn't crash either
    return this.props.children; 
  }
}

As mentioned in the comment above, when I have a component that is throwing an error, I get this error:

Script error.
    at handleError (webpack://home/./node_modules/webpack-dev-server/client/overlay.js?:252:58)
    at eval (webpack://home/./node_modules/webpack-dev-server/client/overlay.js?:271:7)
    at Object.invokeGuardedCallbackDev (webpack://pdp/./node_modules/react-dom/cjs/react-dom.development.js?:4213:16)
    at invokeGuardedCallback (webpack://pdp/./node_modules/react-dom/cjs/react-dom.development.js?:4277:31)
    at beginWork$1 (webpack://pdp/./node_modules/react-dom/cjs/react-dom.development.js?:27446:7)
    at performUnitOfWork (webpack://pdp/./node_modules/react-dom/cjs/react-dom.development.js?:26552:12)
    at workLoopSync (webpack://pdp/./node_modules/react-dom/cjs/react-dom.development.js?:26461:5)
    at renderRootSync (webpack://pdp/./node_modules/react-dom/cjs/react-dom.development.js?:26429:7)
    at performSyncWorkOnRoot (webpack://pdp/./node_modules/react-dom/cjs/react-dom.development.js?:26080:20)
    at flushSyncCallbacks (webpack://pdp/./node_modules/react-dom/cjs/react-dom.development.js?:12042:22)

I looked at the webpack config file for both projects, and the look OK, but I'm not sure what else the problem could be.

Thanks, James