ReactのUnKnown Prop Warningについて

初めに

React-Hook-FormとMUIを使ってForm画面を作っている最中以下のエラーが表示されました。

Warning: React does not recognize the `formState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `formstate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

「なんでー」と思ってReact Hook FormのIntegration with UI Librariesを見ると、{({field})}が{(field)}となっているではありませんか！！

render={({ field }) => <Select 
          {...field} 
          options={[
            { value: "chocolate", label: "Chocolate" },
            { value: "strawberry", label: "Strawberry" },
            { value: "vanilla", label: "Vanilla" }
          ]} 

ということがありました。

調べてみると、Unknown Prop Warningと言われるもので、反省ということで記事を書かせていただきます。

Unknow Prop Warningとは

簡単に言うと、認識しない引数を渡すとこのWarningが表示されるみたいです。
例えば、下記のようにpropsがありそれをスプレッド構文で渡す場面があると思います。
その際、divタグにはidという属性はあるが、layoutという属性はありません。このような場合、上記の警告が表示されます。

props //props.layout='horizontal' props.id="my-id"
<div {...props} />

結論

今回は、{}が抜けていたため、期待通りのスプレッド構文で渡すことができなくなっていたということですね。