DnD Between Components

Question

Is there any way to drag and drop between components? I have two components exactly the same ( in terms of data structure and UI). One button on first component expands the second component and I want to drag and drop items among them. I believe it cannot be achieved by using only React.

I feel like I'm almost there but that doesn't change that I'm stuck. I made my entire app <DragDropContext> and <Draggable>'ed the necessary areas. When I drag items to another component, they first try to have a place on the list in that component but they can't fit (I may need to pass DroppableIds of each Droppables by using REDUX) and they return to their start points.

Index JS as follows:

<DragDropContext onDragEnd={this.onDragEnd}>
                <div className="row">
                    <React.Fragment>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-">
                            <ContentSelector idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12 pl-0">
                            <BroadcastCreation idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12">
                            <ScreenArea idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12 pl-0">
                            <Streamed />
                        </div>
                    </React.Fragment>
                </div>
</DragDropContext>

Component1 as follows:

map.map((item, index) => mapView.push(
            <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                            snapshot.isDragging,
                            provided.draggableProps.style
                        )}
                    >

Answer 1

By using props and loosing some hair, I've managed to solve the problem.