textarea 高さの最大を决めたい

textareaが自動で改行できるようになっています。
高さが100pxまでいった時にdivタグとtextareaの高さが100pｘより大きくならないために以下のように実装しました。
しかし写真のように100px以上になった時にdivタグは100px以上にはならないのですがtextareaが自動で改行されて１００ｐｘ以上となってしまいます。
どう修正したらいいのでしょうか？
ご教授お願いしたいです。

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

type TArea = {
  parent: number;
  texth: number;
};
const TextAreaA = styled.div<TArea>`
  padding: 12px 12px;
  height: 28px;
  background: #e1e6ed;
  border-radius: 24px;
  min-height: ${({ parent }: TArea) => (parent <= 100 ? parent : 100)}px;
  textarea {
    width: 100%;
    resize: none;
    height: ${({ texth }: TArea) => texth}px;
    ::-webkit-resizer {
      display: none;
    }
  }
`;

type Props = {
  text: string;
   onHandleChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
};

export const TextArea: FunctionComponent<Props> = ({
  text,
  isShowPreviewCard,
}) => {
  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}`);
    onHandleChange(e);
  };

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