簡単に可変式のテキストエリアを作る【React】

お問い合わせフォームを作成する際に、可変式のテキストエリアを作ったので、残しておきます。
※内容薄いですが

export const Contact = memo(() => {
  ...省略...
  const textArea = document.querySelector('textarea');
  const textRowCount = textArea ? textArea.value.split('\n').length : 0;
  const rows = textRowCount + 1;

  return (
    <>
      <label htmlFor="contents">
	お問合せ内容<span className={style.remarks}></span>
      </label>
      <textarea
        name="contents"
	id="contents"
	rows={rows}
	value={contacts.contents}
	onChange={handleChange}
      />	
   </>
  )
});

定数のrowsで一行余裕をもたせています。
あとはstyleを調整すると良いと思います。

以上です。