Почему debugger не доходит до then catch?

Question

[Дмитрий Коляда]

Есть компонент InputArea

import React, {Component} from 'react';
import axios from 'axios';

class InputArea extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({text: event.target.value});
  }

  async handleSubmit(event) {
    axios.post('/api/test', {text: this.state.text})
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });    // console.log(words);
  }

  render() {
    return (
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label htmlFor="exampleFormControlTextarea1">Введите текст</label>
            <textarea
                onChange={this.handleChange}
                value={this.state.text}
                className="form-control"
                id="exampleFormControlTextarea1"
                rows={20}
            />
          </div>
          <button type="submit" className="btn btn-primary btn-lg">Проанализировать текст</button>
        </form>
    );
  }
}

export default InputArea;

в методе handleSubmit выполняется асихронный http запрос, который далее я пытаюсь отлаживать но breakpoint не срабатывает ни в then ни в catch.

Помогите, пожалуйста, понять почему так происходит?

Дебаггер в phpstorm настраивал по этой инструкции