ResetBoundary for HoC

[stychu]

Hello,
I'm a bit struggling with how to pass reset function from either QueryErrorResetBoundary or useQueryErrorResetBoundary to the HoC provided by react-error-boundary.

Resetting boundary work when using<TlsErrorBoundary><ABC/></TlsErrorBoundary>
but I can't manage it with withTlsErrorBoundary(ABC)

Any suggestion would be appreciated

const ErrorFallback = ({ traceId, status, error, resetErrorBoundary }) => {
  console.info(error instanceof BoundaryError)
  const trace = error.traceId ?? traceId
  const errorStatus = error.status ?? status

  return (
    <Notification title="Something went wrong" variant="error">
      <small>
        <strong>
          {errorStatus} {error.message}
        </strong>
      </small>
      <br />
      <span>Please </span>
      <Button variant="link" onClick={resetErrorBoundary}>
        try again
      </Button>
      <span> or </span>
      <Link
        href={`mailto:...`}
      >
        contact us
      </Link>
      {trace && (
        <>
          <br />
          (send this traceId: {trace})
        </>
      )}
    </Notification>
  )
}

export const withTlsErrorBoundary = (Component: React.ComponentType) =>
  withErrorBoundary(Component, {
    FallbackComponent: ErrorFallback,
  })

const TlsErrorBoundary: FC<{ traceId?: string; status?: number }> = ({
  children,
  traceId,
  status,
}) => {
  const { reset } = useQueryErrorResetBoundary()

  return (
    <ErrorBoundary
      onReset={reset}
      FallbackComponent={(props) => (
        <ErrorFallback {...props} traceId={traceId} status={status} />
      )}
    >
      {children}
    </ErrorBoundary>
  )
}

export default TlsErrorBoundary

[stychu]

export const withTlsErrorBoundary = (Component: ComponentType) => (props) =>
  (
    <TlsErrorBoundary>
      <Component {...props} />
    </TlsErrorBoundary>
  )