【react】onChangeの度にstyled-componentsが呼び出されて、textareaが入力できない

昨日どハマりした例です。

reactのフォーム用モジュール formikを使用しています。
textareaタグをスタイルコンポーネントで囲い
その中でonchangeを読んでいます。

          <TextareaWrapper>
            <textarea
              style={{ width: '100%', color: 'black' }}
              name="todo"
              onChange={formik.handleChange}
              rows="5"
              defaultValue={defaultTodo}
            >
            </textarea>
          </TextareaWrapper>

下記がtextareaWrapperのコンポーネントです。

  const TextareaWrapper = styled.div`
    max-width: 600px;
    margin: auto;
    border: 1.5px solid #03A9F4;
    border-radius: 7px;
    color: black;
    background: white;
  `

こうするとonChangeが発火する度にtextareaWrapperコンポーネントが再レンダリングされるので
文字を入力する度にテキストエリアの中身が空になってしまいます。

styled-componentsではなくsassに書き換えることで解決しました。

          <div>
            <textarea
              style={{ width: '100%', color: 'black' }}
              name="todo"
              onChange={formik.handleChange}
              rows="5"
              defaultValue={defaultTodo}
            >
            </textarea>
          </div>