How can I access this element with react

Question

I have this js:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Titulo extends Component{
    render(){
        return (
            <h1>Hola Mundo</h1>
        );
    }
}

class Contenido extends Component{
    constructor(props){
        super(props);
        this.state = {
            element: props.myDiv
        }
    }

    render(){
         return (
            <div ref={this.state.element} className="contenido">
                <p className="parrafo">
                Este es el contenido principal de la página
                </p>
            </div>
         );
    }
}

class LeftPanel extends Component{

constructor(props) {
    super(props);
    this.state = {
        daemon: props.textContent,
        showPopup: false,
        elem: 0
    };
}

togglePopup() {
    this.setState({
    showPopup: !this.state.showPopup
    });
}

addText(i){
    var t = <p id={i}>Texto agregado</p>
    var a = this.state.daemon;
    a.appendChild(t);
    this.setState({
        elem: i+1
    });
}

removeText(i){
    var a = this.state.daemon;
    a.removeChild(a.lastChild());
    this.setState({
        elem: i-1
    });
}

render(){
    return (
        <div className="left">
            <span className="spanLeft" onClick={this.togglePopup.bind(this)}>Popup</span><br/>
            <span className="spanLeft" onClick={this.addText(this.state.elem)}>Agregar text</span><br/>
            <span className="spanLeft" onClick={this.removeText(this.state.elem)}>Quitar texto</span><br/>
            <span className="spanLeft" onClick="">Elemento 4</span>                    
            {this.state.showPopup ? 
            <MyPopUp
                closePopup={this.togglePopup.bind(this)}
            />
            : null
            }
        </div>
    );
}   
}

class PiePagina extends Component{
render(){
    return (
        <div className="pie">
            <span>Pie de página</span>
        </div>
    );
}
}


class Cabecera extends Component{
constructor(props){
    super(props);
    this.mycontent = React.createRef();
}

render(){
    return (
        <div className="cuerpo">
            <div className="cabecera">
                <Titulo/>
            </div>
            <div className="row">
                <LeftPanel textContent={this.mycontent}/>
                <Contenido myDiv={this.mycontent}/>
            </div>
            <div>
                <PiePagina/>
            </div>
        </div>
    );
}
}

class PopUpContent extends Component{
render(){
    return(
        <div className="popupContent">
            <div>
                < span className="CloseButton"
                    onClick={this.props.closePopup} >
                    X
                </span>
            </div>
            <div >
                <span className="pie" >
                    Hola!Soy un popup     
                </span>
            </div> 
            <div className="parrafo" >
                <p>
                Este es un mensaje más que está dentro del popup 
                </p> 
            </div>
        </div>
    );
}
}

class MyPopUp extends Component{
render(){
    return(
        <div className="popup">
            <div className="popup_inner">
                <PopUpContent
                    closePopup={this.props.closePopup}
                />
            </div>
        </div>
    );
}
}
ReactDOM.render(<Cabecera/>,document.getElementById('root')); 

Ok, so I wish to access the div on class "Contenido" so I can add some text and delete some text after clicking on some elements.

But I get an error that says that a.appendChild() is not a method.

I see that it isn't being recognised as a method because when trying to acces it with this.state.daemon it isn't returning an element