Grommet TextArea exports multiline text as a single line in the image

Question

I want to export Grommet TextArea as an image. The following code works if there is just a single line of text. But if I adjust the TextArea component in a way to make the text fill multiple lines, this won't be exported in the output image.

This is how it looks (1 - is the page which contains the multiline TextArea I want to export, 2 - the exported TextArea, containing just a single line of text)

Seems like I'm just missing something about HTML canvas. Or maybe there is some property in Grommet TextArea which helps with changing that behavior?

App.js:

import React, { Component } from "react";
import { TextArea } from "grommet";
import "./styles.css";
import { exportComponentAsPNG } from "react-component-export-image";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.textRef = React.createRef();

    this.state = { text: "" };
  }

  render() {
    const { text } = this.state;
    return (
      <div className="App">
        <TextArea
          ref={this.textRef}
          value={text}
          onChange={(event) => this.setState({ text: event.target.value })}
        />
        <button onClick={() => exportComponentAsPNG(this.textRef)}>
          Click
        </button>
      </div>
    );
  }
}

index.js:

import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

index.html:

<div id="root"></div>

Answer 1

The issue came out from html2canvas library, which is a core of react-component-export-image. There are a couple of threads for this issue in the html2canvas community, including this one (the main one, I guess): https://github.com/niklasvh/html2canvas/issues/2008

The best solution (which also helped in my case) is to use contenteditable div instead of textarea element