React Drag & Drop Event propagation problem

Question

I have a simple Drag & Drop setup. What's special is that there can be dropzones inside dropzones. My problem is, that whenever I drop something in my child component, the parent event gets fired as well but only under certain circumstances.

For example (this works, no event propagation):

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>
        );
    }
}

The important part is this line here:

onDrop={this.onDrop}

If my drop event is inside the same component everything works as expected.

As soon as I change the line to this:

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

The event propagation stops working. This is the onDrop function I am calling inside the parent:

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

Answer 1

Found the answer in this SO-Post (just didn't scroll down enough).

So apparently the solution is to basically use the first approach and replace the alert("test") part with this.props.onDropFunction(event, this.props.folder.id);

Answer 2

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

pass event like this and try