How to export array lines value of textarea by javascript

Question

I need break textarea content to array of lines, so my code is

<textarea id="myTextarea" style="width: 700px; height: 300px;">
2全国各地から厳選された有名焼き芋店やおいもスイーツの専門店が集結し、素材にこだわった極上の焼き芋や多彩なおいもスイーツを楽しめるイベント!
</textarea>
  
  <button onclick="splitTextarea()">Split Textarea</button>
  
  <script>

const getRenderedRows = (lines) => {
    // const lines = textareaRef.current.value.split('\n');
    const renderedRows = [];
    // const canvas = document.createElement('canvas');
    // const context = canvas.getContext('2d');
    context.font = window.getComputedStyle(textareaRef.current).font;
    const textareaWidth = textareaRef.current.clientWidth - 20;
    const textareaStyles = window.getComputedStyle(textareaRef.current);
    const div = document.getElementById('textForm');
    div.style.width = `${textareaRef.current.clientWidth}px`;
    div.style.fontSize = `14px`;
    div.style.lineHeight = textareaStyles.lineHeight;
    
    lines.forEach(line => {
      if (line === '') {
        // Handle blank lines
        renderedRows.push('');
      } else {
        let start = 0;
        while (start < line.length) {
          let end = start;
          while (end < line.length) {
            const text = line.slice(start, end);
            // div.textContent = text;
            // console.log(div.clientHeight)
            if (div.clientHeight > 21) {
              break;
            }
            end++;
          }
          renderedRows.push(line.slice(start, end));
          start = end;
        }
      }
    });

    return renderedRows;
  }
  function splitTextarea() {
    const textarea = document.getElementById("myTextarea");
    const text = textarea.value;
  
    // Step 1: Split by hard line breaks (`\n`)
    const lines = text.split("\n");
    const renderedRows = []
    // Step 2: For each paragraph, split into rows based on textarea width
    // const rowsArray = [];
    const tempElement = document.createElement("div");
    tempElement.style.position = "absolute";
    // tempElement.style.visibility = "hidden";
    tempElement.style.whiteSpace = "pre-wrap"; // Preserve spaces and line breaks
    tempElement.style.width = `${textarea.clientWidth}px`; // Match textarea width
    tempElement.style.fontFamily = getComputedStyle(textarea).fontFamily; // Match font
    tempElement.style.fontSize = getComputedStyle(textarea).fontSize; // Match font size
    tempElement.style.lineHeight = getComputedStyle(textarea).lineHeight; // Match line height
    document.body.appendChild(tempElement);
  
    lines.forEach(line => {
      if (line === '') {
        // Handle blank lines
        renderedRows.push('');
      } else {
        let start = 0;
        while (start < line.length) {
          let end = start;
          while (end < line.length) {
            const text = line.slice(start, end);
            // div.textContent = text;
            // console.log(div.clientHeight)
            if (tempElement.clientHeight > 21) {
              break;
            }
            end++;
          }
          renderedRows.push(line.slice(start, end));
          start = end;
        }
      }
    });
  
    // Clean up
    // document.body.removeChild(tempElement);
  
    console.log("Rows Array:", renderedRows);
    return renderedRows;
  }
  </script>

My expect it should return array of content of each line in textarea [2全国各地から厳選された有名焼き芋店やおいもスイーツの専門店が集結し、素材にこだわった極上の焼き芋や多彩, なおいもスイーツを楽しめるイベント!] but now it return ["2全国各地から厳選された有名焼き芋店やおいもスイーツの専門店が集結し、素材にこだわった極上の焼き芋や多彩なおいもスイーツを楽しめるイベント!" , ""] How to break a long line in textarea to be each row ?