React JS: How to create a multiline textarea or textinput that doesn't exceed a given number of rows?

Question

I'm new to coding and this is my first question here:

Problem

For a React JS project, I need to create a textarea (or textinput) in which the user can't exceed the given space of 2 rows. Unfortunately, numberoflines, rows and maxheight only limit the size of the textarea/textinput, but doesn't prevent it from adding new lines and becoming scrollable. The maxlength attribute only limits the characters, which isn't sufficient for my case.

I found a similiar question (see link below) but I have a hard time making the solutions work in my code:

React Native to limit lines in TextInput

Could someone help me?

Many thanks in advance!

import { useState } from "react";
import "./brick.css";

export default function Editor() {
  const [textarea, setTextarea] = useState("");
  const [characterCount, setCharacterCount] = useState(0);

  const handleChange = (event) => {
    setTextarea(event.target.value);
    setCharacterCount(event.target.value.length);
  };

  return (
    <form>
      <textarea
        value={textarea}
        onChange={handleChange}
        className="Editor"
        name="Editor"
        cols="34"
        rows="2"
        placeholder="Promo Text"
        autocomplete="off"
        autocorrect="off"
        autofocus="true"
      />
      <p>{characterCount} Characters</p>
    </form>
  );
}