title: Basic react-selectable-fast example not working
body: <p>I'm trying to <a href="https://react-selectable-fast.now.sh/" rel="nofollow noreferrer">replicate this example</a>. It won't work somehow. From components higher in the hierarchy to lower ones, I have three files:</p>
  
  <p>index.js:</p>
  
  <pre><code>import React, { Component } from "react"
  import { SelectableGroup } from "react-selectable-fast"
  import List from "../components/List"
  
  const items = [
    {
      player: "Dirk Nowitzki",
      year: 1999,
    },
    {
      player: "Magic Johnson",
      year: 1980,
    },
    {
      player: "Michael Jordan",
      year: 1990,
    },
  ]
  
  const IndexPage = () =&gt; (
    &lt;SelectableGroup
      className="main"
      clickClassName="tick"
      // enableDeselect
      // tolerance={this.state.tolerance}
      // globalMouse={this.state.isGlobal}
      // allowClickWithoutSelected={false}
      // duringSelection={this.handleSelecting}
      duringSelection={() =&gt; {
        console.log("DURING")
      }}
      // onSelectionClear={this.handleSelectionClear}
      onSelectionFinish={() =&gt; {
        console.log("FINISH")
      }}
    &gt;
      &lt;List items={items} /&gt;
    &lt;/SelectableGroup&gt;
  )
  
  export default IndexPage
  </code></pre>
  
  <p>List.js</p>
  
  <pre><code>import React, { Component } from "react"
  import SelectableComponent from "./Film"
  
  export default class List extends Component {
    render() {
      console.log(this.props.items)
      return (
        &lt;&gt;
          {this.props.items.map((item, i) =&gt; (
            &lt;SelectableComponent key={i} player={item.player} year={item.year} /&gt;
          ))}
        &lt;/&gt;
      )
    }
  }
  </code></pre>
  
  <p>Player.js</p>
  
  <pre><code>import React from "react"
  import { createSelectable } from "react-selectable-fast"
  
  const Player = ({ selectableRef, selected, selecting }) =&gt; (
    &lt;div
      ref={selectableRef}
      style={{
        border: "1px solid blue",
        width: "300px",
        height: "300px",
        float: "left",
      }}
      className="tick"
    &gt;
      {console.log(selected)}
      {console.log(selecting)}
    &lt;/div&gt;
  )
  
  export default createSelectable(Player)
  </code></pre>
  
  <p>It doesn't throw any errors, but the console.log in <code>Player.js</code> are always undefined. OnSelectionFinish and DuringSelection work fine, at least the console.log are coming through.</p>