How to have multiple rows within a HTML input tag?

Many Stack Overflow questions have suggested that one should use a textarea instead of an input tag when multiple rows are needed but the problem is that a textarea is not editable i.e. we cannot parse HTML elements inside a textarea.

<input className=”form-control” value={HTMLReactParser(text)} onChange={handleOnChange} id=”myBox” placeholder=’Enter the content’ style={{height: ’15vh’}}/>