is it possible to make textarea scrollHeight decrease less than 3 row

I am a newbie with the css and html. I am using textarea to make user input multi line content, this is the minimal code I have made to show the issue I am facing, the App.tsx code look like this:

import React, { useState } from "react";

const App: React.FC = () => {
  const [promptLines, setPromptLines] = useState<number>(1);

const handleChange = (e: any) => {
  const inputContent = e.target.value;
  if (inputContent && inputContent.length > 0) {
      const talkInput = document.getElementById("talkInput");
      if(!talkInput) return;
      const lineHeight = parseInt(window.getComputedStyle(talkInput).getPropertyValue('line-height'));
      talkInput.style.cssText = 'line-height: 23px;';
      const scrlht = talkInput.scrollHeight;
      const lines = Math.floor(scrlht / lineHeight);
      console.log(lines);
  }
}


  return (
    <div className="outerdiv">
     <textarea 
     id="talkInput"
     rows={promptLines ? promptLines : 1}
      onChange={handleChange}></textarea>
    </div>
  );
}

export default App;

and this is the App.css css file look like:

.outerdiv{
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 25px;
  border: 2px solid #ccc;
  transition: border-color 0.5s ease;
  width: 80%;
  margin: auto;
  margin-bottom: 15px;
  margin-top: 10px;
  box-sizing: border-box;
  min-height: 40px;
}

.outerdiv textarea{
    flex: 1;
    border: none;
    border-radius: 25px;
    outline: none;
    font-size: 16px;
    font-family: sans-serif;
    resize: none;
    padding: 6px;
    min-height: 23px;
    line-height: 23px;
    height: 1rem;
}

when I input the content into textarea, the lines will increase, when I delete the contnet from textarea, the lines will decrease, all things work as expect, but the minimal lines are 3. It will not decrease less than 3 rows. why scrollHeight stop decrease in 3 rows height? is it possible to make the scrollHeight continue decrease until to 1 row?

Here is an example using div instead of textarea with contentEditable="true". Is that what you need?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.my-div {
    width: 200px;
    border:1px solid black;
    min-height: 20px;
    max-height:100px; 
    overflow-y: auto
}

<!-- language: lang-html -->

<div contentEditable="true" class="my-div"></div>

<!-- end snippet -->