React textarea loses focus unexpectedly

I've created a Row and a Col components for an Card in Accordion using Bootstrap - simple, not React.Bootstrap or whatever. Row and Col just show their children, the Card just has more props and also just shows the children. Like that:

class Col extends React.Component {render () {return (
      <div  className='col' id={'col_'+this.props.colid} key={shortid.generate()}>
        {this.props.children}
      </div>)}}

class Row extends React.Component {render () { return (
        <div  className='row' id={'row_'+this.props.rowid} key={shortid.generate()}>
          {this.props.children}
        </div>)}}

Then I want to insert a textarea, which is provided with a function to make some changes to the text and I display these changes within a div below the textarea. Also I've got a button, that copies the text to buffer, based on clipboard.js

The first version of render function works just fine, but it doesn't give me the needed design, so I came up with the second version, based on Row and Col components, described above.

The contents mainly does not differ - the same textarea, checkbox, button and div. What differs is the layout. In the first version there is no layout at all, in the second I tried my best :)

So:

  render () { return (<React.Fragment>
        <textarea id='xng0' onChange={this.handleChange} ref={this.xng0ref} />&nbsp;
        <CopyButton target="st0" message="Copy text" /> <br />
        <input type='checkbox' onChange={this.toggleTranslit} 
               defaultChecked={this.state.tranParam} /><span>Translit?</span><br />
        <div id='st0' border='1' ref={this.st0ref} >
          {this.state.st0value}
        </div></React.Fragment>)}

The second version:

  render () {return ( <React.Fragment><Row><Col>
            <textarea id='xng0' onChange={this.handleChange} ref={this.xng0ref} />&nbsp;
              </Col><Col><Row><Col>
                <CopyButton target="st0" message="Copy text" />
              </Col></Row>
            <Row><Col>
                <input  type='checkbox' onChange={this.toggleTranslit} 
                        defaultChecked={this.state.tranParam}
                    /><span>Translit?</span>
              </Col></Row>
          </Col>
        </Row>
        <Row>
          <div id='st0' border='1' ref={this.st0ref}>
            {this.state.st0value}
          </div></Row></React.Fragment>)}

My problem is: while the first render() version keeps focus in the textarea, when I type, the second version throws the focus off the textarea after the first letter was typed AND clears the textarea. That is I have no possibility to input some long text - I get only one letter.

What did I miss? Why this happens and how to make the focus stable?