Changes are not saved if setState is present in the onChange function about react-nestable HOT 12 CLOSED

onDragChange(items, item) {
    this.setState({
      anyState: "any change"
    });
  }

      <Nestable
        collapsed
        items={items}
        renderItem={renderItem}
        handler={<span style={handlerStyles} />}
        ref={ref}
        onChange={(items, item) => this.onDragChange(items, item)}
      />

import Nextable from "./nestable.jsx";
import { convertCostCentersIntoItems } from "./util";

let costCentersTest = {
  "1": "HEAD OFFICE",
  "2": "UK",
  "3": "INTERNATIONAL",
  "2-4": "UK > MANCHESTER",
  "2-5": "UK > LONDON",
  "2-5-7": "UK > LONDON > VAN-1",
  "2-5-7-9": "UK > LONDON > VAN-1 > DRIVER-1",
  "2-5-8": "UK > LONDON > VAN-2",
  "2-5-8-10": "UK > LONDON > VAN-2 > DRIVER-2",
  "2-6": "UK > BIRMINGHAM"
};

class CostCenters extends Component {
  constructor(props) {
    super(props);
    this.state = {
      needsSave: false,
      newCostCenterName: "",
      userChangedItems: []
    };

    this.onDragChange = this.onDragChange.bind(this);
  }

  async componentDidMount() {
    const response = await fetch(baseUrl + "/api/cost_centres_get");
    const data = await response.json();
    console.log(data);
    this.setState({
      items: convertCostCentersIntoItems(data)
    });
  }

  collapse = collapseCase => {
    if (this.refNestable) {
      switch (collapseCase) {
        case 0:
          this.refNestable.collapse("NONE");
          break;
        case 1:
          this.refNestable.collapse("ALL");
          break;
        case 2:
          this.refNestable.collapse([1]);
          break;
      }
    }
  };

  onDragChange(items, item) {}

  updateInputValue = event => {
    this.setState({
      newCostCenterName: event.target.value.toUpperCase()
    });
  };

  submitNewCostCenter = () => {
    let obj = {
      id: 10,
      text: this.state.newCostCenterName
    };

    this.setState({
      items: this.state.items.concat(obj)
    });
  };

  render() {
    return (
      <div>
        <Controls
          updateInputValue={this.updateInputValue}
          submit={this.submitNewCostCenter}
          cancel={this.hideNewCostCenterInput}
          collapse={this.collapse}
        />

        <Nextable
          items={convertCostCentersIntoItems(costCentersTest)}
          ref={el => (this.refNestable = el)}
          onChange={this.onDragChange}
        />
      </div>
    );
  }
}

import React from "react";
import Nestable from "react-nestable";
import EdiText from "react-editext";

const handlerStyles = {
  position: "absolute",
  top: 0,
  left: 0,
  width: "12px",
  height: "100%",
  background: "steelblue",
  cursor: "pointer"
};

const styles = {
  position: "relative",
  padding: "10px 15px",
  fontSize: "20px",
  border: "1px solid #f9fafa",
  background: "#f9fafa",
  cursor: "pointer",
  display: "flex"
};

const renderItem = ({ item, collapseIcon, handler }) => {
  return (
    <div style={styles}>
      {handler}
      {collapseIcon}
      <EdiText showButtonsOnHover value={item.text} onSave={() => {}} />
    </div>
  );
};

export default ({ items, ref, onChange }) => {
  return (
    <div>
      <Nestable
        collapsed
        items={items}
        renderItem={renderItem}
        handler={<span style={handlerStyles} />}
        ref={ref}
        onChange={(items, item) => onChange(items, item)}
      />
    </div>
  );
};

      <Nestable
        collapsed
        items={items}
        renderItem={renderItem}
        ref={ref}
        onChange={onChange}
      />

  const Handler = () => {
    return <span style={handlerStyles} />;
  };

      <Nestable
        collapsed
        items={items}
        renderItem={renderItem}
        handler={<Handler />}
        ref={ref}
        onChange={onChange}
      />