How to pass JSX code into it as children?

I am using it like this:

```

```

what gets displayed in the textarea is just `formState.commentBody` and `Textarea` is defined as:

```
import React, { forwardRef } from 'react';
import TextareaAutoSize from 'react-textarea-autosize';
import { StyledTextarea } from './Styles';

const Textarea = forwardRef(({ className, invalid, onChange, ...textareaProps }, ref) => (
<StyledTextarea className={className} invalid={invalid}>
<TextareaAutoSize
{...textareaProps}
onChange={event => onChange(event.target.value, event)}
ref={ref || undefined}
/>
</StyledTextarea>
));

export default Textarea;
```

Now, instead of passing a string (`formState.commentBody`) as value into `Textarea`, I want to pass some jsx code:

```jsx
<blockquote>
this is a customizable text and clickable within textarea
</blockquote>
```

into `<textarea>` as its children, such that it would be equivalent to :

```jsx
<TextareaAutoSize>
<blockquote>
this is a customizable text and clickable within textarea
</blockquote>
</TextareaAutoSize>
```

The final goal is to be able to display block code inside the textarea.
Does this library support it?
How can I achieve this?

I tried to code inside the `TextareaAutoSize` component directly like this:
```
const Textarea = forwardRef(({ className, invalid, onChange, ...textareaProps }, ref) => (
<StyledTextarea className={className} invalid={invalid}>
<TextareaAutoSize
{...textareaProps}
onChange={event => onChange(event.target.value, event)}
ref={ref || undefined}
>

<blockquote>
hahaha
</blockquote>

</TextareaAutoSize>
</StyledTextarea>
));

export default Textarea;

```
However it is displaying:

[object Object]
<img width="380" alt="Screen Shot 2022-10-18 at 4 26 20 PM" src="https://user-images.githubusercontent.com/2807843/196366544-da556525-9203-4f99-855f-4dc770e1dbfd.png">

Why is this happening?