FallbackComponent not rendering

Relevant code:

function ErrorFallback({ error }) {
		return (
			<div role="alert">
				<p>Something went wrong:</p>
				<pre style={{ color: "red" }}>{error.message}</pre>
			</div>
		);
	}

	return (
			<ErrorBoundary
				FallbackComponent={ErrorFallback}
				onReset={() => window.sessionStorage.clear()}
				onError={(error) => {
					console.log(error);
				}}
			>
                            <button onClick={( ) => {throw new Error("Testing with an error")}}>Error thrower</button>
                       </ErrorBoundary>

When I click on the button that triggers an error the FallbackComponent doesn’t render, even though the error gets logged(onError recognises it). Am I missing something?

[JaedeokK]

error boundary doesn’t catch error in event handler, if you want catch error in event handler try to use useErrorHandler hook. https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

[GideonMax]

@JonhnyDev Can you provide the code for the child component that’s throwing the error that doesn’t get caught by the error boundary?