input z atrybutem required - nie wykrywa mi tego atrybutu

Mimo, że posiadam atrybut required to po kliknieciu w button "Dodaj Punkt" przesyła mi pustą wartość a powinno mi zablokowac..

 {this.state.openModal10 &&
                    <div className="container">
                        <button className="closeButton" onClick={this.closeModal10}></button>
                        <div className="title">Dodaj trasę</div>
                        {this.state.Creator &&
                            <form onSubmit={this.addItem2}">
                                <div className="input-fields">
                                    <input
                                        required
                                        type="text"
                                        value={this.state.NameRoute}
                                        onChange={e => this.setState({
                                            NameRoute: e.target.value
                                        })}
                                    />
<div style={{ display: 'flex', flexDirection: 'row' }}>
                                        <div>
                                            {this.state.activeButton ? <button className="btn5" onClick={() => this.appendElement(this.state.Name, this.state.Description, this.state.Y, this.state.X, this.state.RouteId)}>Dodaj punkt</button> : <button disabled className="btn5" onClick={() => this.appendElement(this.state.Name, this.state.Description, this.state.Y, this.state.X, this.state.RouteId)}>czekaj...</button>}
}