Tengo mi aplicación de reacción creada a partir de vite y allí tengo mi envoltura de componente de límite de error de reacción personalizado de Componentes, la cosa es que no puede detectar errores. Depuré mi componente de error pero no puedo recibir ningún valor en getDerivedStateFromError no en componentDidCatch

Aquí está mi código de límite de error:

 /* 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; } }

y mi código app.js:

 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;

¿Alguien sabe cuál es el problema?