I am trying to create an error boundary but it not working. The componentDidCatch not firing.

I expected that the fallback UI will render but actually the original UI is still there and nothing is happening.

const SimpleBtn = lazy(() => import("./componentJsx/SimpleBtn.jsx"));
const SimpleBtn2 = lazy(() => import("./componentJsx/SimpleBtn2.jsx"));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: "", errorInfo: "" };
  }

  static getDerivedStateFromError(error) {
    return error;
  }

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

  render() {
    return this.state.errorInfo ? (
      <>
        <h3>Something is wrong!</h3>
        <details>{this.state.error}</details>
      </>
    ) : (
      this.props.children
    );
  }
}

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

  toggleBtn = () => {
    // use transition
    startTransition(() => {
      this.setState((state) => ({
        toggle: !state.toggle,
      }));
    });
  };

  render() {
    const { toggle } = this.state;
    return (
      <ErrorBoundary>
        <Suspense fallback={<div>...Loading</div>}>
          <h1> Sample file </h1>
          {toggle && <SimpleBtn toggleBtn={this.toggleBtn} />}
          <SimpleBtn2 toggleBtn={this.toggleBtn} />
          <button
            onClick={() => {
              throw new Error("i am error!");
            }}
          >
            Throw Error
          </button>
        </Suspense>
      </ErrorBoundary>
    );
  }
}

I found a similar question but it not answered.

I tried to write code as in official react documentation but still not working and i can't figure out the problem also!.

After using Components tab i got to know that the error state is not changing.