Dragula AutoScroll with React : https://codesandbox.io/s/wo3po2mw47

index.js

import React from "react";
import { render } from "react-dom";
import shortid from "shortid";
import dragula from "react-dragula";
import "react-dragula/dist/dragula.min.css";
import "bootstrap/dist/css/bootstrap.css";

class App extends React.Component {
  constructor() {
    super();

    this.dnd = null;
    this.mirrorContainer = null;
    this.drake = null;

    this.initDrake = this.initDrake.bind(this);
    this.autoScrollDrake = this.autoScrollDrake.bind(this);
    this.clearScrollTime = this.clearScrollTime.bind(this);
  }
  componentDidMount() {
    this.initDrake();
  }

  componentDidUpdate() {
    if (this.drake) this.drake.destroy();
    this.initDrake();
  }

  initDrake() {
    this.drake = dragula([this.dnd], {
      revertOnSpill: true,
      moves: (el, container, handle) => {
        console.log(handle);
        return handle.dataset.type === "move";
      },
      mirrorContainer: this.mirrorContainer
    });

    this.drake.on("drop", () => {});

    this.drake.on("out", (el, container) => {
      this.clearScrollTime(this.scrollTime);
      console.log(
        this.mirrorContainer.querySelector(`[data-id=${el.dataset.id}]`)
      );
      this.autoScrollDrake(
        container,
        this.mirrorContainer.querySelector(`[data-id=${el.dataset.id}]`)
      );
    });

    this.drake.on("over", () => {
      this.clearScrollTime(this.scrollTime);
    });

    this.drake.on("dragend", () => {
      this.clearScrollTime(this.scrollTime);
    });

    this.drake.on("cancel", () => {
      this.clearScrollTime(this.scrollTime);
    });
  }

  autoScrollDrake(container, mirrorContainer) {
    const scroll = container;
    const { height: clientHeight } = container.getBoundingClientRect();
    const { scrollTop } = container;
    const { y } = mirrorContainer.getBoundingClientRect();

    if (clientHeight < y) {
      this.scrollTime = setInterval(() => {
        scroll.scrollTop += 10;
      }, 20);
    }

    if (scrollTop > y) {
      this.scrollTime = setInterval(() => {
        scroll.scrollTop -= 10;
      }, 20);
    }
  }

  clearScrollTime() {
    if (this.scrollTime) clearInterval(this.scrollTime);
  }

  render() {
    return (
      <div className="container">
        <h1>Dragula AutoScroll with React</h1>

        <div
          className="panel panel-default"
          style={{
            height: 300,
            overflowX: "hidden",
            overflowY: "auto"
          }}
          ref={dnd => {
            this.dnd = dnd;
          }}
        >
          <ul className="list-group">
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Cras justo odio
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Dapibus ac facilisis in
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Morbi leo risus
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Porta ac consectetur ac
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Vestibulum at eros
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Cras justo odio
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Dapibus ac facilisis in
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Morbi leo risus
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Porta ac consectetur ac
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Vestibulum at eros
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Cras justo odio
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Dapibus ac facilisis in
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Morbi leo risus
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Porta ac consectetur ac
            </li>
            <li
              data-id={shortid.generate()}
              data-type="move"
              className="list-group-item"
            >
              Vestibulum at eros
            </li>
          </ul>
        </div>
        <div
          ref={mirrorContainer => {
            this.mirrorContainer = mirrorContainer;
          }}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

This is awesome. Just a little change make this so great.

Instead of this.mirrorContainer.querySelector([data-id=${el.dataset.id}])

Use this this.mirrorContainer.querySelector([data-id="${el.dataset.id}"]). I believe you can see the difference quotes.

Check docs Attribute selectors

Hope this helps