Reactでhtmlタグを拡張したPropsを定義する

ReactにComponentPropsという汎用型が定義されているので、これを利用するのがよいです。

具体的には以下のような感じで使います。
iframeのpropsにaddressというプロパティを追加しています。

import { IframeHTMLAttributes, ComponentProps } from "react"

type MapProps = ComponentProps<"iframe"> & {
  address: string
}

type MapProps = IframeHTMLAttributes<HTMLIFrameElement> & {
  address: string
}

export const Map = ({ address, ...iframeProps }: MapProps) => {
  return (
    <iframe
      src={`https://maps.google.co.jp/maps?output=embed&q=${address}`}
      height="500"
      {...iframeProps}
    />
  )
}

IframeHTMLAttributes<HTMLIFrameElement>などと具体的に書いても構わないのですが、この型の存在を知らないと書けないため、ComponentPropsで指定するのが脳内メモリを喰わないから楽です。