drake.on drop не работает при изменении маршрута «реагировать-драгула»

Question

Я работаю над приложением react js и использую react-dragula для сортировки строк списка. Он отлично работает при перезагрузке страницы, но возникает проблема при переходе с другой страницы на эту страницу со списком. В основном это проблема с маршрутизацией (потому что она работает при перезагрузке страницы)

Я использую нижеупомянутую версию пакетов::

      react-dragula: 1.1.17 
react-router-dom: 5.2.0

Это мой код строки списка::

      import React, { Fragment } from "react";
import Dragula from "react-dragula";
import ListItem from 'Components/ListItem';

class MyListComp extends React.Component {

    /** variables */
    drake = null;
    containers = [];
    sequence = [];

    componentDidMount() {
        this.renderDragDrop();
    }
    
    renderDragDrop() {
        this.drake = Dragula(this.containers, {
            isContainer: function (el) {
                return (el.id === "seq-drag");
            },
            moves: function (el, source, handle, sibling) {
                return (handle.id === "seqSortBtn");
            },
        });
        this.drake.on("drop", async (el, target, source, sibling) => {
            if (target) {
                var ids = [];
                var parentElement = document.querySelector("#" + target.id); // Select parent element
                var childElements = parentElement.querySelectorAll(".seq-el"); // Select child elements
                for (var i = 0; i < childElements.length; i++) {
                    let objToPush = {
                        _id: childElements[i].getAttribute("id"),
                        seq: i + 1,
                    }
                    ids.push(objToPush);
                }
                this.sequence = ids; // store in variable;
            }
        });
    }

    render() {
        const { lists } = this.props;
        const dragulaDecorator = (componentBackingInstance) => {
            if (componentBackingInstance) {
                this.containers.push(componentBackingInstance)
            }
        };
        return (
            <Fragment>
                <div id="seq-drag" ref={dragulaDecorator}>
                    {lists && lists.length > 0 && lists.map((seq, key)=>(
                        <ListItem key={key} seq={seq} />
                    ))}
                </div>      
            </Fragment>
        )
    }
}

export default MyListComp;

Пожалуйста, предложите кому-нибудь, в чем проблема при загрузке компонента через маршрутизацию с использованием react-dragula? и есть ли какая-либо проблема в react-dragula, или мы можем решить ее с помощью какого-либо пользовательского кода, пожалуйста, предложите.