React Suite Textarea not working properly in Form with validation

Question

I am using React Suite to build a page with a text area in it. I am using the Form Validation feature in the library and I have to use a text-area.

Context

Following the examples on custom control validation and the examples on how to create a text area control, I built the following:

import React from "react";
import ReactDOM from "react-dom";
import { Input, Form, Schema } from "rsuite";

const App = () => {
  const [formValue, setFormValue] = React.useState({ desc: "" });

  const model = Schema.Model({
    desc: Schema.Types.StringType().isRequired("required"),
  });

  const TextArea = React.forwardRef((props, ref) => (
    <Input {...props} as="textarea" ref={ref} />
  ));

  const formRef = React.useRef();

  return (
    <>
      <Form
        model={model}
        formValue={formValue}
        onChange={setFormValue}
        ref={formRef}
      >
        <Input as="textarea" rows={3} placeholder="Textarea1" />
        <Form.Control
          name="desc"
          placeholder="Form textarea"
          accepter={TextArea}
        />
      </Form>
    </>
  );
};

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

There is a CodeBox available for reproing this.

The problem

However, when I run it, all renders fine, but the text box using the Form.Control has a weird behavior on input, where only one char at a time can be added. The first text area has a normal behavior.

Answer 1

Of course I need to create the forwardRef outside the component otherwise it re-creates the component at every re-render:

const TextArea = React.forwardRef((props, ref) => (
  <Input {...props} as="textarea" ref={ref} />
));

const App = () => { ... }