TypeScript & React: What's the difference between 'React.HTMLProps<T>' and 'JSX.IntrinsicElements["T"]'

Question

I am looking for the most "canonical" and/or "up-to-date" way to add a set of default HTML attributes as a set of allowed TypeScript props to a customized, "enhanced" HTML component, let's say a Button.

I found two type definitions. The first is React.HTMLProps<T>, the second JSX.IntrinsicElements["T"].

So I can Enhance my Button either this way:

type Props = {
  children: React.ReactNode
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
  type?: "button" | "submit" | "reset"
  className?: string
} & React.HTMLProps<HTMLButtonElement> 

or like that:

type Props = {
  children: React.ReactNode
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
  type?: "button" | "submit" | "reset"
  className?: string
} & JSX.IntrinsicElements["button"]

I've tried both ways and both of them seem to work fine (no squigly red lines).

The question is: Is there a significant difference between those type definitions? Should I use rather React.HTMLProps<T>, JSX.IntrinsicElements["T"], or is it just a matter of personal preference?

Thank you.

Slightly related question