javascriptの分割代入についてのエラーを一緒に考えてほしいです。

Question

###前提・実現したいこと

React + Reduxの勉強をしています。
勉強に使っているリポジトリのソースコードを読みながら、写経していました。しかし、同じように実装していったところ、分割代入 (destructuring assignment)の箇所で詰まってしまいました。
エラーメッセージに示されているURLを見たのですが、なにがだめなのか理解できませんでした。

###発生している問題・エラーメッセージ

Warning: Unknown props `createLane`, `updateLane`, `deleteLane`, `attachToLane`, `move`, `createNote`, `updateNote`, `deleteNote` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by Lane)
    in Lane (created by DropTarget(Lane))
    in DropTarget(Lane) (created by Connect(DropTarget(Lane)))
    in Connect(DropTarget(Lane)) (created by Unknown)
    in div (created by Unknown)
    in Unknown (created by App)
    in div (created by App)
    in App (created by DragDropContext(App))
    in DragDropContext(App) (created by Connect(DragDropContext(App)))
    in Connect(DragDropContext(App)) (created by Unknown)
    in div (created by Unknown)
    in Provider (created by Unknown)
    in Unknown

###該当のソースコード

import React from 'react';
import {compose} from 'redux';
import {connect} from 'react-redux';
import {DropTarget} from 'react-dnd';
import Notes from './Note';
import Editable from './Editable';
import ItemTypes from '../constants/itemTypes';
import * as laneActions from '../actions/lanes';
import * as noteActions from '../actions/notes';


const noteTarget = {
  hover(targetProps, monitor) {
    const sourceProps = monitor.getItem();
    const sourceId = sourceProps.id;

    if (!targetProps.lane.notes.length) {
      targetProps.attachToLane(
        targetProps.lane.id,
        sourceId
      );
    }
  }
};

class Lane extends React.Component {
  render() {
    const {connectDropTarget, lane, laneNotes, ...props} = this.props;
    const laneId = lane.id;

    return connectDropTarget(
      <div {...props}>
        <div className="lane-header"
             onClick={() => props.updateLane({id: laneId, editing: true})}>
          <div className="lane-add-note">
            <button onClick={this.addNote.bind(this, laneId)}>+</button>
          </div>
          <Editable className="lane-name" editing={lane.editing}
                    value={lane.name}
                    onEdit={name => props.updateLane({id: laneId, name, editing: false})} />
          <div className="lane-delete">
            <button onClick={this.deleteLane.bind(this, lane)}>x</button>
          </div>
        </div>
        <Notes
          notes={laneNotes}
          onValueClick={id => props.updateNote({id, editing: true})}
          onEdit={(id, task) => props.updateNote({id, task, editing: false})}
          onDelete={(id, e) => this.deleteNote(laneId, id, e)} />
      </div>
    );
  }
  deleteLane(lane, e) {
    e.stopPropagation();

    const laneId = lane.id;

    lane.notes.forEach(noteId => {
      this.props.detachFromLane(laneId, noteId);
      this.props.deleteNote(noteId);
    });

    this.props.deleteLane(laneId);
  }

  addNote(laneId, e) {
    e.stopPropagation();

    const o = this.props.createNote({
      task: 'New Task'
    });
    this.props.attachToLane(laneId, o.note.id);
  }
  deleteNote(laneId, noteId, e) {
    e.stopPropagation();

    this.props.detachFromLane(laneId, noteId);
    this.props.deleteNote(noteId);
  }
}

const mapStateToProps = (state, props) => ({laneNotes: props.lane.notes.map(id => state.notes[state.notes.findIndex(note => note.id === id)]).filter(note => note)});    //引数のpropsは省略可

const mapDispatchToProps = {
  ...laneActions,
  ...noteActions
};

export default compose(
  connect(
    mapStateToProps,  //Function
    mapDispatchToProps //Object
  ),
  DropTarget(ItemTypes.NOTE, noteTarget, (connect) => ({
    connectDropTarget:connect.dropTarget()
  }))
)(Lane);

###試したこと
参考URLを見てみて、ES7でないと対応できないのかと考えて、

    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",

などを要れてみましたが、直らずでした。

なにか他に策はありますでしょうか？

Answer 1

• Reactで作ったオリジナルのカスタム要素 … 好きに使ってOK！
• HTMLで最初から定義されている要素 … 最初から定義されている属性以外使っちゃダメ！

<div {...props}>

↑この部分が原因です