React-dnd Перетащите элемент списка и поместите его в другой компонент (без списка).

Question

В последнее время я боролся с реакцией и не понял, как мне действовать. Итак, мое приложение имеет два основных компонента: «Боковая панель» и «Холст». Затем внутри боковой панели я использую карту для отображения данных из состояния.

Вот Sidebar.js, я использую некоторые компоненты Material-UI

function Sidebar(props) {

   let Nodes = props.data.filter(node24 => node24.distribution.imagedescriptor.toLowerCase().includes(props.filter.toLowerCase())
   ).map(node24 => (
     <Node key={node24.distribution.imagedescriptor} primary={node24.distribution.imagedescriptor} />
     ))

return (

  <List>
    {Nodes}
  </List>
);
}

Внутренний Node Component является компонентом для каждого элемента списка. Node.js:

class Node extends Component {
  render() {

    return (
      <div>
        <ListItem button key={this.props.key}>
          <ListItemText primary={this.props.primary} />
        </ListItem>
      </div>
    );
  }
}

export default Node;

Итак, в конце концов, есть боковая панель с ее узлами, а остальная часть экрана приложения - холст, который является абсолютно пустым компонентом. Чего я хочу добиться, так это перетаскивать любой элемент списка (Узел) внутри холста - без удаления из списка -.

Я уже подключил dragSource к компоненту Node и dragTarget к Canvas. После этого я не знаю, как действовать, поскольку у узлов нет координат по умолчанию, которые я могу изменить, чтобы переместить их.

Если кто-то может дать мне подсказку, чтобы я мог двигаться дальше, будет очень важно. Я прилагаю скриншот моего приложения до сих пор. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

Приложение - боковая панель и холст