React-materialize input is not working

Question

I am facing the following problem, I created a site using only materialize and then I used the React library in the template, but now some fields are not working and one of them is the input I had to remove jquery in some parts because I saw in some forums that it is not recommended to use jquery next to React. Below is the input code and an image showing what happened when I try to enter something in the input.

render() {
    const { open } = this.state;

    return (
        <Modal open={open} onClose={this.handleCloseModal} center styles={this.state.styles}>
            <form method="" action="">
                <div className="row">
                    <h5>Solicitar ligação</h5>
                </div>
                <div className="row">

                    <div className="input-field col s12 m12 l6 ">
                        <input onChange={this.handleChangeInput} value={this.state.form.name} name='name' type="text"/>
                        <label>Nome / Sobrenome</label>
                    </div>

                    <div className="input-field col col s12 m12 l6">
                        <input onChange={this.handleChangeInput} value={this.state.form.phone} name="phone" type="text"/>
                        <label>Telefone</label>
                    </div>
                </div>
            </form>

            <div className="modal-footer">
                <button onClick={this.handleSubmitForm} style={{ backgroundColor: this.props.theme.primary }} href="#" className="btn waves-effect btn modal-action" type="submit" name="action">Enviar</button>
            </div>
        </Modal>
    );
}

And the image showing what happened, note that when typing my name the label does not go up.