Хочу связать input и h1, а консоль пишет что я использую не функцию, что не так в коде?

// Компонент родитель через которого я передаю значение от одного ребенка к другому

class Container extends React.Component{
      constructor(props) {
	    super(props);
	    this.state = {
	      title: "Hello World"
	    };
	  };
      setTitle = (text) => {
        if(text!=null)
          this.setState ({ title: text});
      }
      render(){
        return (
          <div className="container">
            <Constructor_template titlename={ this.state.title } />
            <Ready_template updatetitle={ this.setTitle } />
          </div>
        );
      }
    }

//Дочерний компонент с input
class Constructor_template extends React.Component{
      update = () =>{
		this.props.updatetitle(this.refs.text.value);
  	  }
    
      render(){
        return (
          <form action="" className="constructor-template">

            <div className="name-template">
              <h2>Введите название шаблона</h2>
              <input type="text" ref="text" onChange={this.update}></input>
            </div>

            <input type="submit" value="Сохранить шаблон"></input>

          </form>
        );
      }
    }

//Дочерний компонент с h1
class Ready_template extends React.Component{
      render(){
        return (
          <div className="ready-template" >
            <form className="interview-container" >
            
              <h1>{this.props.titlename}</h1>

              <input type="submit"></input>

            </form>
          </div>
        );
      }
    }