React, react-sortable-hoc and multiple lists

This library is very very cool. I have the following problem:

I have multiple lists, and I want to be able to drag and drop to reorder within the list, as well as between the lists. In the lists below, the user may choose to move a partner within the list, or from one list to another.

It looks like by default, the items can only be dragged within the same component. How can I create a set of components that can be targets for each other's items?

App.js

import React from 'react';
import './App.css';
import SortablePartner from './SortablePartner';

const priorityPartners = [
  "AwesomeTech",
  "Bazinga Software"
];

const medPartners = [
  "Zippy-Do",
  "SillySoft",
  "Samsonite"
];

const lowPartners = [
  "Acme Engineering",
  "Elbow Tech",
  "Rockets & Ricers"
];

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Prioritize Your Partners</h1>
      </header>
      <div className="SortableContainer">
        <SortablePartner priority="High" state={priorityPartners} />
        <SortablePartner priority="Medium" state={medPartners} />
        <SortablePartner priority="Low" state={lowPartners} />
      </div>
    </div>
  );
}

export default App;

SortablePartner.js

import React, {Component} from 'react';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

const SortableItem = SortableElement(({value}) => {
  return(
    <li>
      <div className="partner-element">
        <div className="partner-name">{value}</div>
        <div className="partner-type">
          MSP
        </div>
      </div>
    </li>
  )
});

const SortableList = SortableContainer(({items}) => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

class SortablePartner extends Component {
  state={};
  constructor(props) {
    super(props);
    this.state.items = props.state;
    this.priority = props.priority;
  };
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return (
      <div className="partnerList">
        <h2>Priority: {this.priority}</h2>
        <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />
      </div>
    )
  }
}

export default SortablePartner;