Как дублировать компонент при сохранении состояния?

Question

У меня есть компонент с state, который обновляется в результате некоторых асинхронных операций. Этот компонент является частью некоторого пользовательского интерфейса перетаскивания, когда пользователь начинает операцию перетаскивания, мне нужно отобразить этот компонент в отдельной части приложения, которая отвечает за отображение перетаскиваемого элемента.

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

Я думал, что смогу заставить это работать, сделав что-то вроде этого - метод рендеринга компонента, ссылающегося на источник перетаскивания:

render() {
    return (
        <DragSourceComponent ref={this.dragSourceComponentRef} />
    )
}

И другой метод рендеринга компонента, отвечающий за рендеринг компонента предварительного просмотра перетаскивания:

renderDragPreview(dragSourceComponentRef) {
    return React.cloneElement(dragSourceComponentRef.current)
}

Однако это не работает, потому что dragSourceComponentRef.current не считается допустимым элементом React, и даже если бы это было так, я не думаю, что React.cloneElement копирует состояние компонента (документация по этому вопросу не ясна).

Все это в виду, какие еще варианты у меня есть? Можно ли сказать, предварительно установить состояние компонента перед его визуализацией в первый раз? Если бы это было так, я мог бы визуализировать компонент предварительного просмотра перетаскивания с теми же параметрами и клонированным состоянием, чтобы он выглядел точно так же, как исходный элемент перетаскивания. Любые другие идеи / советы приветствуются!