【MUI】multilineのTextFieldで"Too many re-renders"エラー

概要

ReactのMUIにて、multilineを設定したTextFieldを使用していた際に、コンソールログ上に以下のエラーが大量に発生しました。
（MUIのバージョンはv5）

<TextField
  multiline
  rows={2}
/>

MUI: Too many re-renders. The layout is unstable.
TextareaAutosize limits the number of renders to prevent an infinite loop.

普通、Reactで"Too many re-renders"のエラーが出るときは、Stateの更新が頻発しているのが原因だったりするのですが、今回そういった状態でないはずなのに表示されました。

解決策

以下のようにinputComponent: 'textarea'を適用すれば起こらなくなりました。

<TextField
  multiline
  rows={2}
  InputProps={{
    inputComponent: 'textarea' // ← 追記
  }}
/>

原因としては、TextFieldにmultilineを指定するとTextareaAutosizeという、入力内容に応じて自動で高さ調整がされるコンポーネントが内部的に使用されるのですが、その自動調整が場合によって暴走することがあるらしいです。
なので、textareaを指定し、自動調整を無効化することで、解決した形になります。

以上です。