Текстовый контент не отображается в реакции

Question

Я пытаюсь создать linechart с tooltip, используя d3js . Когда мышь находится на графике, должна появиться всплывающая подсказка, показывающая мне значение в этой точке, все это работает, но проблема в том, что содержимое tooltipText не отображается, даже если я вижу его значение в консоли.

Это мой код:

class Tooltip extends Component{

    render(){

        if(this.props.showTooltip){
            var focusXtranslate;
            var focusYtranslate;

            this.props.focusXtranslate === "" ?  focusXtranslate = 0 : focusXtranslate = this.props.focusXtranslate;
            this.props.focusYtranslate === "" ?  focusYtranslate = 0 : focusYtranslate = this.props.focusYtranslate;

            return(
                <g className="focus" transform={"translate(" + focusXtranslate + "," + focusYtranslate + ")"}>  
                    <line className={"x-hover-line hover-line"} x1={"910"} x2={"910"}></line>
                    <line className={"y-hover-line hover-line"} y1={"0"} y2={this.props.height -  focusYtranslate}></line>
                    <circle r={"7.5"}></circle>
                    <text id="tooltipText" x={"15"} dy={".31em"}>{this.props.focusValue}</text>
                </g>
            );
        } else {
            return null;
        }
    }
}

export default Tooltip;