テキストエリア リセットした時に改行を元に戻したい。

Question

テキストエリアに文字を入力して、buttonを押下するとテキストがリセットされます。
しかし改行はそのままになってしまいます。
ボタンを押したときに改行もリセットしたいのですがどうしたらいいでしょうか？

import React, { FunctionComponent, useState } from 'react';
import { MessageTextArea } from 'components/atoms/MessageTextArea';

const Test: FunctionComponent = () => {
  const [text, setText] = useState('');
  const onChange = (e) => {
    setText(e.target.value);
  };
  const onClick = () => {
    setText('');
  };
  return (
    <>
      <MessageTextArea text={text} onChange={onChange} />
      <button onClick={onClick}></button>
    </>
  );
};

export default Test;

import { EAchange } from 'domain/type';
import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

type TArea = {
  parent: number;
  texth: number;
};
const TextArea = styled.div<TArea>`
  padding: 12px 12px;
  height: 25px;
  background: #eef5ff;
  border-radius: 24px;
  min-height: ${({ parent }: TArea) => (parent <= 208 ? parent : 208)}px;
  textarea {
    width: calc(100% - 39px);
    font-size: 14px;
    max-height: 198px;
    height: ${({ texth }: TArea) => texth}px;
  }
`;

type Props = {
  text?: string;
  onChange: (e: EAchange) => void;
};

export const MessageTextArea: FunctionComponent<Props> = ({
  text,
  onChange,
}) => {
  const textAreaRef = useRef<HTMLTextAreaElement>(null);
  const [textAreaHeight, setTextAreaHeight] = useState('auto');
  const [parentHeight, setParentHeight] = useState('auto');

  useEffect(() => {
    setParentHeight(`${textAreaRef.current!.scrollHeight}`);
    setTextAreaHeight(`${textAreaRef.current!.scrollHeight}`);
  }, [text]);

  const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setTextAreaHeight('auto');
    setParentHeight(`${textAreaRef.current!.scrollHeight}`);
    onChange(e);
  };

  return (
    <TextArea parent={Number(parentHeight)} texth={Number(textAreaHeight)}>
      <textarea
        ref={textAreaRef}
        rows={1}
        onChange={onChangeHandler}
        value={text}
      />
    </TextArea>
  );
};