Axios вызывается, но не в моем обработчике событий

У меня странная ситуация, когда мой вызов AXIOS ajax выполняется, хотя вызов выполняется в обработчике событий. Поток следующий.

У меня есть ящик material-ui, в котором есть элемент списка, который меняет местами компонент на моей главной странице. У этого компонента есть кнопка отправки, которая вызывает Axios к REST API, но она вызывается в обработчике событий из ListItem не тогда, когда я нажимаю кнопку «Отправить».

Вот код:

handleSubmit() {
    // var apiBaseUrl = "http://localhost:4000/api/";
    const apiBaseUrl = "http://localhost:8000/";
    axios.defaults.withCredentials = true;
    const self = this;
    const payload = {
        "to": this.state.to + " " + this.state.toTime,
        "from": this.state.from + " " +this.state.fromTime
    };
    axios.defaults.xsrfCookieName = 'csrftoken';
    axios.defaults.xsrfHeaderName = 'X-CSRFToken';
    axios.post(apiBaseUrl + 'api/SaveSchedule/', payload, { headers: {'Accept': 'application/json'} } )
        .then ( (response)  => {
            if (response.status == 200) { }
            else if (response.status == 400) {
                console.info("");
            } else {
                console.info(" ");
                alert(" ");
            }
        })
        .catch(function (error) {
            if (error.response.status==400){
                alert("Check your credentials at arlo.netgear.com. Invalid email or password. ");
                console.info("Data:" + error.response.data);
                console.info("Status: " + error.response.status);
                console.info("Headers: " + error.response.headers);
                console.info("Error: "+ error);
            } else if (error.response) {
            } else if (error.request) {
                // The request was made but no response was received
                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
                // http.ClientRequest in node.js
                console.info(error.request);
            }
        });
}

ОКАЗЫВАТЬ:

render() {
    const { from, to } = this.state;
    const modifiers = { start: from, end: to };
    return (
        <div className = "InputFromTo">
            ...
            <form noValidate autoComplete = "off">
            <TextField
                id = "starttime-placeholder"
                label = "Start Time:"
                placeholder = "Enter Start Time"
                margin = "normal"
                />
            <TextField
                id = "endtime-placeholder"
                label = "End Time"
                placeholder = "Enter End Time"
                margin = "normal"
                /><br/>
                <Button variant = "raised" color = "primary" onClick = {this.handleSubmit}>Save Schedule</Button>
            </form>
            ...
        </div>
    )
}

ИЗМЕНИТЬ Кроме того, в моем ящике есть ListItem. Здесь делается звонок.

  handleListSelect(event) {
    this.props.onDrawerSelect(event.target.value);
}

render() {
    return (
        <div>
            <ListItem button>
                <ListItemIcon>
                    <ScheduleIcon/>
                </ListItemIcon>
                <ListItemText primary = "Scheduler" onClick = {this.handleListSelect}/>
            </ListItem>

Мне интересно, заставляет ли тот факт, что я использую обработчик props, это отправить какое-то событие моим детям (фактический компонент, который имеет это событие)?