Implementation of an error boundary in React functional component

ErrorBoundary.tsx

import { useState, useEffect } from 'react';

function ErrorBoundary({ fallback, children }) {
  const [error, setError] = useState(null);

  useEffect(() => {
    if (error) {
      // log the error or send it to a server
      console.error(error);
    }
  }, [error]);

  function resetError() {
    setError(null);
  }

  function handleComponentError(error) {
    setError(error);
  }

  if (error) {
    // render the fallback UI
    return React.cloneElement(fallback, { resetError });
  }

  return (
    // render the children normally
    <React.Fragment>
      {React.Children.map(children, child =>
        React.cloneElement(child, {
          onError: handleComponentError,
        })
      )}
    </React.Fragment>
  );
}