App.js is the root container of a React App

App.js

// FileName: App.js
import './App.css';
import React from 'react';
// importing components from another files
import { ListComponents } from "./ListComponent";
// imports related to DND
import { DragDropContext } from 'react-beautiful-dnd';
function App() {
   // List 1 consisting of all MARVEL super heroes
   const [list1, setList1] = React.useState(['Captain America', 'Iron Man', 'SpiderMan', 'Thor', 'Hulk', 'Black Widow', 'Loki', 'Black Panther', 'Deadpool', 'Doctor Strange', 'Ant Man', 'Captain Marvel'])
   // List 2 consisting of all DC super heroes
   const [list2, setList2] = React.useState(['BatMan', 'SuperMan', 'Wonder Woman', 'Flash', 'Green Lantern', 'AquaMan', 'Robin', 'Cyborg', 'StarFire', 'HawkGirl', 'Shazam'])
   // Function for deleting items from list using index
   const deleteItem = (list, index) => {
      return list.splice(index, 1)
   }
   // Function called when Drag Ends
   const onDragEnd = (result) => {
      // getting the source and destination object
      const { source, destination } = result
      if (!destination)
         return;
      if (source.droppableId === destination.droppableId) {
         if (source.droppableId === "Marvel_drop_area") {
            let tempList = list1
            const removed = deleteItem(tempList, source.index)
            tempList.splice(destination.index, 0, removed)
            setList1(tempList)
         }
         else {
            let tempList = list2
            const removed = deleteItem(tempList, source.index)
            tempList.splice(destination.index, 0, removed)
            setList2(tempList)
         }
      } else {
         let tempList1 = list1
         let tempList2 = list2
         if (source.droppableId === "Marvel_drop_area") {
            const removed = deleteItem(tempList1, source.index)
            tempList2.splice(destination.index, 0, removed)
            setList1(tempList1)
            setList2(tempList2)
         } else {
            const removed = deleteItem(tempList2, source.index)
            tempList1.splice(destination.index, 0, removed)
            setList1(tempList1)
            setList2(tempList2)
         }
      }
   }
return (
      <DragDropContext onDragEnd={onDragEnd}>
         <div className="App">
            <header className="App-header">
               <h4>Hands on React-Beautiful-DND</h4>
               <ListComponents Marvel={list1} DC={list2} />
            </header>
         </div>
      </DragDropContext>
   )
}
export default App;

DefaultApp.js

// Filename : App.jsx
import './App.css';
function App() {
   return (
      <div className="App">
         <header className="App-header">
            <h4>Hands on React-Beautiful-DND</h4>
         </header>
      </div>
   );
}
export default App;

ListComponent.jsx

// Filename : ListComponent.jsx
import React from 'react';
// imports related to DND
import { Droppable, Draggable } from 'react-beautiful-dnd';
export function ListComponents({ Marvel, DC }) {
   const getListStyle = isDraggingOver => ({
      background: isDraggingOver ? "lightblue" : "darkgrey",
      width: '21%',
      margin: 'auto',
   });
   const getItemStyle = (isDragging, draggableStyle) => ({
      userSelect: "none",
      background: isDragging ? "darkgrey" : "white",
      color: isDragging ? "white" : "black",
      padding: isDragging ? '0%' : '2%',
      paddingLeft: '2%',
      margin: '0%',
      fontSize: '17px',
      borderBottom: '0.5px solid gray',
      // styles we need to apply on draggables
      ...draggableStyle
   });
   return (
      <div style={{ width: '100%', display: 'flex' }}>
         <Droppable droppableId="Marvel_drop_area"  >
            {(provided, snapshot) => (
               <div
                  {...provided.droppableProps}
                  ref={provided.innerRef}
                  style={getListStyle(snapshot.isDraggingOver)}
               >
                  <ul style={{ listStyleType: 'none', textAlign: 'left', padding: '0%', width: '100%' }} >
                     <h6 style={{ paddingLeft: '2%' }}>Marvel SuperHeroes</h6>
                     {Marvel.map((data, index) => (
                        <Draggable key={data} 
 draggableId={`${data}${index}`} index={index}>
                           {(provided, snapshot) => (
                              <li
                                 key={index}
                                 ref={provided.innerRef}
                                 ...provided.draggableProps}
                                 ...provided.dragHandleProps}
                                 style={getItemStyle(
                                    snapshot.isDragging,
                                    provided.draggableProps.style
                                 )}
                              >
                                 {data}
                              </li>
                           )}
                        </Draggable>
                     ))}
                  </ul>
                 {provided.placeholder}
              </div>
           )}
        </Droppable>
        <Droppable droppableId="DC_drop_area"  >
           {(provided, snapshot) => (
              <div
                {...provided.droppableProps}
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
              >
                <ul style={{ listStyleType: 'none', textAlign: 'left', padding: '0%', width: '100%' }} >
                   <h6 style={{ paddingLeft: '2%' }}>DC SuperHeroes</h6>
                      {DC.map((data, index) => (
                         <Draggable key={data} draggableId={`${data}${index}`} index={index}>
                            {(provided, snapshot) => (
                               <li
                                  key={index}
                                  ref={provided.innerRef}
                                  {...provided.draggableProps}
                                  {...provided.dragHandleProps}
                                  style={getItemStyle(
                                     snapshot.isDragging,
                                     provided.draggableProps.style
                                  )}
                               >
                                  {data}
                               </li>
                            )}
                         </Draggable>
                      ))}
                   </ul>
                   {provided.placeholder}
                </div>
             )}
          </Droppable>
       </div>
    )
}

ModifiedApp.js

// FileName: App.js
import './App.css';
// importing components from another files
import { ListComponents } from "./ListComponent";
function App() {
// List 1 consisting of all MARVEL super heroes
const list1 = ['Captain America', 'Iron Man', 'SpiderMan', 'Thor', 'Hulk', 'Black Widow', 'Loki', 'Black Panther', 'Deadpool', 'Doctor Strange', 'Ant Man', 'Captain Marvel']
// List 2 consisting of all DC super heroes
const list2 = ['BatMan', 'SuperMan', 'Wonder Woman', 'Flash', 'Green Lantern', 'AquaMan', 'Robin', 'Cyborg', 'StarFire', 'HawkGirl', 'Shazam', '']
return (
      <div className="App">
         <header className="App-header">
            <h4>Hands on React-Beautiful-DND</h4>
            <ListComponents Marvel={list1} DC={list2} />
         </header>
      </div>
   );
}
export default App;

ModifiedListComponent.jsx

// Filename : ListComponent.jsx
import React from 'react';
export function ListComponents({Marvel, DC}) {
return (
   <div style={{ width: '100%', display: 'flex' }}>
      <div style={{ width: '25%', margin: 'auto' }}>
         <ul style={{ listStyleType: 'none', textAlign: 'left' }} >
            <h6>Marvel SuperHeroes</h6>
            {Marvel.map((data, index) => (
               <li key={index}>
                  {data}
               </li>
            ))}
         </ul>
      </div>
      <div style={{ width: '25%', margin: 'auto' }}>
         <ul style={{ listStyleType: 'none', textAlign: 'left' }}>
            <h6>DC SuperHeroes</h6>
            {DC.map((data, index) => (
               <li key={index}>
                  {data}
               </li>
            ))}
         </ul>
      </div>
   </div>
)}