i’m working on a React application where I’ve implemented an ErrorBoundary component to catch and handle errors in my application. However, when I deliberately introduce an error in one of my components, I still get the Create React App (CRA) red error overlay instead of my custom error boundary’s fallback UI.
Here is my ErrorBoundary component:

import React from "react";
import PropTypes from "prop-types";
import { Navigate } from "react-router";

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

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

 componentDidCatch(error, info) {
   // Prevent the error from propagating to the default CRA error overlay
   console.error("Error in component:", error);
   console.error("Error info:", info);
}

goBack = () => {
  this.setState({ shouldGoBack: true });
};

render() {
  const { hasError, shouldGoBack, renderingError } = this.state;
  const { children } = this.props;
  if (shouldGoBack) {
    return <Navigate to="/dashboard" />;
  }

if (hasError) {
  return (
    <div className="w-screen h-screen bg-[radial-gradient(ellipse_at_center,_var(-- 
      tw-gradient-stops))] from-steel-blue via-deep-navy to-eclipse-blue">
      <h1>Something went wrong</h1>
      <p>{renderingError && renderingError.toString()}</p>
      <button type="button" onClick={this.goBack}>
        Go back
      </button>
    </div>
  );
}

  return children;
 }
}

 ErrorBoundary.propTypes = {
     children: PropTypes.node.isRequired,
 };

  export default ErrorBoundary;

I wrapped my Outlet component with the ErrorBoundary in the Layout component:

import React from "react";
import { Outlet } from "react-router-dom";
import LeftSideBar from "../coreUI/LeftSideBar";
import Navbar from "../coreUI/Navbar";
import ErrorBoundary from "../components/ErrorBoundary";

function Layout() {
  return (
    <div className="min-h-screen bg-[radial-gradient(ellipse_at_center,_var(--tw- 
     gradient-stops))] from-steel-blue via-deep-navy to-eclipse-blue">
      <div className="flex">
        <LeftSideBar />
          <div className="flex flex-col flex-1">
          <Navbar />
      <div className="flex flex-col items-center mb-10 mt-10">
        <div>
          {/* <img src={DshareLogo} alt="DshareLogo" className="w-40" /> */}
        </div>
      </div>

      <div className="flex justify-center items-center h-full">
        <ErrorBoundary>
          <Outlet />
        </ErrorBoundary>
      </div>
    </div>
  </div>
</div>
  );
}

export default Layout;

In my Dashboard component, I introduced an intentional error to test the ErrorBoundary:

     import React from "react";
     
    
function Dashboard() {
  return <div>{undefined.name}</div>; // Intentional error
   
return (
 <div className="flex flex-col items-center justify-center ">
    <ListTable />
   </div>
  );
}

   export default Dashboard;

Despite setting FAST_REFRESH=false in my .env file and restarting the development server, I still see the red screen error overlay from CRA:
Uncaught runtime errors:
×
ERROR
Cannot read properties of undefined (reading ‘name’)
TypeError: Cannot read properties of undefined (reading ‘name’)
at Dashboard (http://localhost:3000/static/js/bundle.js:11701:25)
at renderWithHooks (http://localhost:3000/static/js/bundle.js:62221:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:65507:17)
at beginWork (http://localhost:3000/static/js/bundle.js:66803:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:51813:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:51857:20)
at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:51914:35)
at beginWork$1 (http://localhost:3000/static/js/bundle.js:71788:11)
at performUnitOfWork (http://localhost:3000/static/js/bundle.js:71035:16)
at workLoopSync (http://localhost:3000/static/js/bundle.js:70958:9)

Why is the CRA error overlay still showing despite disabling FAST_REFRESH?

How can I ensure that my custom ErrorBoundary catches errors and displays the fallback UI in development and production?
Any help would be greatly appreciated!