Why doesn't the debugger reach the then catch?

Question

JavaScript

I have an InputArea component

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;

in the handleSubmit method, an asynchronous http request is executed, which I then try to debug, but the breakpoint does not work either in then or in catch.

Please help me understand why this is happening?

Debugger in phpstorm set up according to this instruction