Реагировать на проблему распространения события перетаскивания

У меня есть простая настройка Drag & Drop. Что особенного, так это то, что внутри дропзоны могут быть дропзоны. Моя проблема в том, что всякий раз, когда я добавляю что-то в свой дочерний компонент, родительское событие также запускается но только при определенных обстоятельствах.

Например (это работает, без распространения событий):

export default class Folder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dragActive: false
        };
    }

    onDragOver = (e) => {
        e.preventDefault();
        this.setState({ dragActive: true });
    }

    onDragLeave = () => {
        this.setState({ dragActive: false });
    }

    onDrop = (e) => {
        e.stopPropagation();
        alert("test");
    }

    render() {
        return (
            <div className = "col-6 col-sm-4 col-md-3 col-lg-2 col-xl-8ths" onDragOver = {this.onDragOver} onDragLeave = {this.onDragLeave} onDrop = {this.onDrop}>

            </div>
        );
    }
}

Важная часть - вот эта строка:

onDrop = {this.onDrop}

Если мое событие перетаскивания находится внутри того же компонента, все работает так, как ожидалось.

Как только я изменю строку на это:

onDrop = {() => this.props.onDropFunction(event, this.props.folder.id)}

Распространение событий перестает работать. Это функция onDrop, которую я вызываю внутри родителя:

onDrop = (e, folderId) => {
    e.stopPropagation();
    e.preventDefault();
    var files = this.fileListToArray(e.dataTransfer.files);
    this.setState({
        dragActive: false,
        uploadFiles: files
    }, () => {
        this.uploadFiles(folderId);
    });
}