Вызов `componentDidUpdate` при отправке формы

У меня есть компонент класса:

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            abc: '',
            someQuery: ''
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChangeEvent = this.handleChangeEvent.bind(this);
    }

    componentDidUpdate(){
        fetch(`/someLink/${this.state.abc}`)
        .then(response => {
            return response.json();
        }).then(data => {
            this.setState({
                someQuery: data.xxx
            });
        });
    }
    handleSubmit(e){
        const target = e.target;
        const value = target.value;

        this.setState({
            abc: value
        })
        e.preventDefault();
    };
    handleChangeEvent(e){
        const target = e.target;
        const value = target.value;

        this.setState({
            abc: value
        });
    };
    render(){
        return(
            <form onSubmit = {this.handleSubmit}>
                <input name='abc' value = {this.state.abc} onChange = {this.handleChangeEvent} />
                <input type = "submit" value = "Submit" />
            </form>

            <div>{this.state.abc} is currently accessing data from {this.state.someQuery}</div>
        )
    }
}

Как мне запускать componentDidUpdate() каждый раз, когда я обновляю значение поля ввода и нажимаю кнопку отправки?

Вышеупомянутое вызывает жизненный цикл, но из-за setState в handleChangeEvent() жизненный цикл вызывается в тот момент, когда я что-то набираю, и не дожидается нажатия кнопки отправки.

Удаление setState из handleChangeEvent() делает значение поля ввода недоступным для редактирования (невозможно ввести в поле ввода).

Мне нужно, чтобы значение поля ввода было добавлено к api link в жизненном цикле, но я не могу понять, как это сделать.