I have my react app created from vite and there I have my Custom React Error Boundary Component wrap from Components the thing is it cannot catch errors.i debug my error component but it cannot recieve any value in getDerivedStateFromError not componentDidCatch

Here is my Error Boundary Code:

/* eslint-disable @typescript-eslint/no-unused-vars */
import React, { Component } from 'react';

interface IState {
  hasError: boolean;
  eventId?: string;
}

// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface IProps {
  children: any;
}

export default class ErrorBoundary extends Component<IProps, IState> {
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = { eventId: '', hasError: false };
  }

  static getDerivedStateFromError(error: any) {
    console.log('here get Derived');
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error: any, errorInfo: any) {
    console.log('My errors', error);
  
  }

  render() {
    // const { children } = this.props;
    console.log('errors');
    if (this.state.hasError) {
      console.log('errors found', this.state.hasError);
      return (
        <button
          onClick={() =>
            console.log("Error Found)
          }
        >
          Report feedback
        </button>
      );
    }

    return this.props.children;
  }
}

and my app.js code:

import './App.css';
function App() {


  return (
    <div className="App">
      <header className="App-header">
        <ErrorBoundary>
          <button
            onClick={() => {
              throw new Error('Im new Error');
            }}
          >
            Click Me
          </button>
        </ErrorBoundary>
      </header>
    </div>
  );
}

export default App;

does anyone knows what is the issue ?