onSelect не запускается Reactjs

Question

Я создал компонент reactjs, и проблема в том, что onSelect не запускается,

class TemplateController 
{

    default(component) 
    {
        return (
            <div id={ component.props.component_id }>
                <Medias component_id="medias" trigger=".medias-trigger" modal={ true } onSelect={component.events.addAttachment} parent_type="modal" />
                <div id="properties-attachments-modal" className="modal fade modal-fade-in-scale-up" role="dialog" tabIndex="-1" data-backdrop="static">
                    <div className="modal-dialog modal-lg modal-primary modal-simple">
                        <form onSubmit={ component.events.submit }>
                            <div className="modal-content">
                                <div className="modal-header">
                                    <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                    <h4 className="modal-title">Attachments</h4>
                                </div>
                                <div className="modal-body mt-15">
                                    <button className="btn btn-info medias-trigger mb-10" type="button">Add Attachments <i className="fa fa-plus"></i></button>
                                    {
                                        component.state.form.attachments.map((attachment, key) =>
                                            <div key={ key }>
                                                <i onClick={ () => component.events.removeAttachment(key) } className="fa fa-times text-danger cursor-pointer"></i> <a href={ attachment.url } target="_blank" className="text-success">{ attachment.name }</a>
                                            </div>
                                        )
                                    }
                                </div>
                                <div className="modal-footer">
                                    <button type="button" className="btn btn-default btn-pure waves-effect waves-classic" data-dismiss="modal">Close</button>
                                    <button className="btn btn-info waves-effect waves-classic">Save Changes</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        );
    }
}

export { TemplateController };

event.js

class Events 
{

    constructor(component) 
    {
        this.component = component;
        utils.REACT.bindClassToMethods(this, ['addAttachment', 'removeAttachment', 'submit']);
    }

    /**
     * jQuery Events Collection
     */
    jQueryEvents()
    {
        var component = this.component;

        /**
         * Opens the Modal
         */
        $(document).on('click', this.component.props.trigger, function() 
        {
            // Set Default Value
            component.setState(_.cloneDeep(component.defaultState));

            // Fetch Details.
            component.requests.getAttachments();

            // Show Modal
            component.el.modal.modal('show');
        });
    }

    /**
     * Select a Media
     */
    addAttachment(media)
    {
        var form = this.component.state.form;
        form.attachments.push(media);
        this.component.setState({ form: form });
        console.log(form, 'form')
    }

    /**
     * Removes an Attachment
     */
    removeAttachment(key)
    {
        var form = this.component.state.form;
        form.attachments.splice(key, 1);
        this.component.setState({ form: form });
    }

    /**
     * Submits the Form
     * 
     * @var  e
     */
    submit(e)
    {
        e.preventDefault();
        this.component.requests.save();
    }

}

export { Events };

'removeAttachment', 'submit' успешно вызывается, но почему не 'addAttachment'?