How to use the semantic-ui-react.Form.TextArea function in semantic-ui-react

label="Why do you want to come to QHacks 2018? (1000 characters max)"
        validate={[
          required({
            msg: "Please tell us why you want to come to QHacks 2018!"
          }),
          length({
            max: 1000,
            msg: "Your answer cannot exceed 1000 characters!"
          })
        ]}
      />

      

      <p>
        By applying you agree to adhere to{" "}
        <a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf" rel="noopener noreferrer">
          MLH's Code of Conduct
        </a>.
      </p>
    
  );
}

export default (props) =&gt; <input>;

export default function AutoSavingInput({ value, onChange, InputElement, timeout }: IProps) {
  const Input = InputElement || Form.TextArea;
  const [localValue, setLocalValue] = useState(value);
  const save = useDebouncedCallback((newValue) => onChange(newValue), timeout, []);

  const onInputChange = (e: React.KeyboardEvent) => {
    const newValue = e.currentTarget.value;

    if (localValue === newValue) {
      return;
    }

    setLocalValue(newValue);
    save(newValue);
  };

  const onFormSubmit = (e: React.FormEvent) => {
    e.preventDefault();

const { allowError } = this.state;
    const error = !isPristine() && !isValid() && allowError;

    const inputProps = {
      ...filterSuirElementProps(this.props),
      value: getValue() || isPristine() && defaultValue || '',
      onChange: this.handleChange,
      onBlur: this.handleBlur,
      className: inputClassName,
      error: !disabled && error,
      label,
      id,
    };

    const shortHandMode = (inputAs === Form.Input || inputAs === Form.TextArea);
    const inputNode = shortHandMode ? createElement(inputAs).props.control : inputAs;

    if (shortHandMode) {
      delete inputProps.label;
      if (inputAs === Form.TextArea) delete inputProps.error;
    }

    return (

disabled={bookingBlocked(fprops)} />
                                        
                                    
                                    
                                    
                                
                                {!link && !fprops.submitSucceeded && (
                                    this.renderRelatedEventsDropdown(bookingBlocked(fprops), fprops.form.mutators)
                                )}
                            
                            {conflictsExist && this.renderBookingConstraints(Object.values(availability.conflicts))}
                            {this.renderBookingState(fprops)}
                        
                    
                

...filterSuirElementProps(this.props),
      value: getValue() || isPristine() && defaultValue || '',
      onChange: this.handleChange,
      onBlur: this.handleBlur,
      className: inputClassName,
      error: !disabled && error,
      label,
      id,
    };

    const shortHandMode = (inputAs === Form.Input || inputAs === Form.TextArea);
    const inputNode = shortHandMode ? createElement(inputAs).props.control : inputAs;

    if (shortHandMode) {
      delete inputProps.label;
      if (inputAs === Form.TextArea) delete inputProps.error;
    }

    return (
      
        { shortHandMode &amp;&amp; label &amp;&amp; <label> { label } </label> }
        { createElement(inputNode, { ...inputProps }) }
        { !disabled &amp;&amp; error &amp;&amp; errorLabel &amp;&amp; cloneElement(errorLabel, {}, getErrorMessage()) }

/>