Как вызвать функцию из Drag & Drop (ReactDND)

Question

У меня есть компонент реагирования, я хочу вызвать функцию (действие) из функции drop() из ReactDND, но он выдает ошибки, проверьте ***** в drop(props, monitor, component) это ошибки как TypeError: props.addContainer is not a function:

import React, { Component } from 'react';
import './Container.css';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import ContainerItem from '../ContainerItem/ContainerItem';
import Paper from 'material-ui/Paper';

// REDUX
import FaGithub from 'react-icons/lib/fa/github';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link, Redirect } from 'react-router-dom';
import { newContainerDropped,showSource } from '../../actions/designerActions';

// DRAG & DROP
import PropTypes from 'prop-types';
import { DropTarget } from 'react-dnd';
import ItemTypes from '../ItemTypes';

import assign from 'lodash/assign';

const SortableItem = SortableElement(({ value }) =>
    <ContainerItem data={value}></ContainerItem>
);

const SortableList = SortableContainer(({ items }) => {
    return (
        <ul>
            {items.map((value, index) => (
                <SortableItem key={`item-${index}`} index={index} value={value} />
            ))}
        </ul>
    );
});

class ContainerData {
    constructor(name, data) {
        this.name = name
        this.data = data
    }

}

const boxTarget = {
    drop(props, monitor, component) {
        const hasDroppedOnChild = monitor.didDrop();
        const item = monitor.getItem();
        const dropResult = monitor.getDropResult();
        console.log("drop:"+JSON.stringify(item));

        // component.state.yaml_source_3={
        //     yaml_source: "z"
        // }

        // ***** THIS LINE CAUSES ERROR: TypeError: props.addContainer is not a function
        props.addContainer();

        // EVEN THIS LINE CAUSES ERROR: TypeError: component.addContainer is not a function
        component.addContainer();

        window.alert( // eslint-disable-line no-alert
            `You dropped ${item.name}`,
          );

        if (dropResult) {
            window.alert( // eslint-disable-line no-alert
              `You dropped ${item.name} into ${dropResult.name}!`,
            );
          }
        //   console.log("DROP:"+JSON.stringify( monitor));
        if (hasDroppedOnChild && !props.greedy) {
            return;
        }

        component.setState({
            hasDropped: true,
            hasDroppedOnChild,
        });
    },
};

function collect(connect, monitor) {
    console.log("over:"+monitor.getItem());
    return {
        connectDropTarget: connect.dropTarget(),
        isOver: monitor.isOver(),
        isOverCurrent: monitor.isOver({ shallow: true })
    };
}

class Container extends Component {
    static propTypes = {
        connectDropTarget: PropTypes.func.isRequired,
        isOver: PropTypes.bool.isRequired,
        isOverCurrent: PropTypes.bool.isRequired,
        greedy: PropTypes.bool,
        children: PropTypes.node,
    }
    constructor(props) {
        super(props);
        this.state = {
            hasDropped: false,
            hasDroppedOnChild: false,
        };
        this.addContainer = this.addContainer.bind(this);
        // console.log(this.props.the_items);
    }


    addContainer() {
        console.log("ADD")
    }


    state = {
        items: [],
    };


    onSortEnd = ({ oldIndex, newIndex }) => {
        this.setState({
            items: arrayMove(this.state.items, oldIndex, newIndex),
        });
    };

    render() {
        const { greedy, isOver, isOverCurrent, connectDropTarget, children } = this.props;
        const { hasDropped, hasDroppedOnChild } = this.state;

        var yaml = require('js-yaml');
        const small_icon_style = {
            width: '12px',
            margin: '2px',
            verticalAlign: 'middle'

        }

        var c;
        var items = [];
        // this.props.showSource();
        if (this.props.yaml_source_2 !== undefined && this.props.yaml_source_2.yaml_source !== "") {
            // console.log("hello " + JSON.stringify(this.props.yaml_source_2));
            var data = yaml.load(this.props.yaml_source_2.yaml_source.yaml_source);
            items = data.spec.template.spec.containers;
        }
        else {
            // console.log("alo " + JSON.stringify(this.props.yaml_source_in_container));
            var data = yaml.load(this.props.yaml_source_in_container);
            if (data.spec !== undefined) {
                items = data.spec.template.spec.containers;
            }
        }
        //console.log("GOING FOR CX "+items.length);
        // for (c = 0; c < items.length; c++) {
        //     var container = items[c];
        //     console.log("cx"+container);
        //     items.push(container);
        // }
        return connectDropTarget(
            // 
            <div>
                <Paper className="container gridBackground" elevation={2} >
                {isOver ?
                <div className='drop_hint'>Drop Object...</div> :
          ''
        }
                    <div className="container_title"
                        onClick={() => this.props.showSource(this.props.yaml_source_in_container)}
                    >{this.props.title}<img src='/diagram_b.png' style={small_icon_style} /></div>
                    <SortableList items={items} onSortEnd={this.onSortEnd} />
                </Paper>
                <div className="container_title">Click on <img src='/diagram_b.png' style={small_icon_style} /> to view source</div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return { yaml_source_2: state.designerReducer };
};
const mapDispatchToProps = (dispatch) => {
    // return bindActionCreators(Object.assign({},( newContainerDropped, showSource ), dispatch))
    // return bindActionCreators({ showSource }, dispatch)
    // var assign = require('lodash/object/assign');
    // return bindActionCreators(assign({}, newContainerDropped, showSource), dispatch)   
    return {
        newContainerDropped : bindActionCreators(newContainerDropped, dispatch),
        showSource: bindActionCreators(showSource, dispatch),
    }
};

var c0 = connect(mapStateToProps, mapDispatchToProps)(Container);
export default DropTarget(ItemTypes.BOX, boxTarget, collect)(c0)