Component not always a valid JSX component depending on a generic type

Bug Report

🔎 Search Terms

jsx react generic valid JSX

🕗 Version & Regression Information

• This changed between versions 5.0.4 and 5.1.3

⏯ Playground Link

Playground Link

💻 Code

import * as React from "react";

const A = <T extends unknown>({ a }: { a: T }) => (typeof a === "string" ? null : new Error("a must be a string")) as T extends string ? null : Error;

const jsxWithError = <A<string> a="a" />;

const B = A<string>;

const jsxWithoutError = <B a="a" />;

🙁 Actual behavior

Error on A in jsxWithError:

'A' cannot be used as a JSX component.
  Its type '<T extends unknown>({ a }: { a: T; }) => T extends string ? null : Error' is not a valid JSX element type.
    Type '<T extends unknown>({ a }: { a: T; }) => T extends string ? null : Error' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Error' is not assignable to type 'ReactNode'.(2786)

🙂 Expected behavior

No error with the generic type provided (as is the case for jsxWithoutError), since we are sure we are using a valid JSX component.

Reproduce the linked Playground example in TypeScript 5.0.4 and 5.1.3, comparing the generic JSX use of A with the specialized B. Trace diagnostic 2786 and ensure the generic form with an explicit type argument is accepted while the existing error case remains meaningful.