What to extend in order to support spread props with typescript

extends.ts

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  icon: React.ReactNode
  // ...other props
}

interface CustomDivProps extends React.HTMLAttributes<HTMLDivElement> {
  content: string
  // ...other props
}

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  valid?: boolean
  // ...other props
}

interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
  id: string
  // ...other props
}

interface DotsLoaderProps extends React.HTMLAttributes<HTMLSpanElement> {
  color?: string
  // ...other props
}

interface IconProps extends React.SVGProps<SVGSVGElement> {
  color?: string
  width?: number | string
  height?: number | string
  // ...other props
}

// this works for all headings (H1, H2, ...) 👇
interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  // ...other props
}

interface HeadingProps extends React.HTMLAttributes<HTMLLIElement> {
  // ...other props
}


// How to creat Types for forms
interface CompanyName extends HTMLFormControlsCollection {
  companyName: HTMLInputElement
}

interface CompanyNameFormElement extends HTMLFormElement {
  readonly elements: CompanyName
}

function handleSubmit(event: React.FormEvent<CompanyNameFormElement>) {
  event.preventDefault()
}