title: React Beautiful DND not working, element is not draggable
body: <p>I've been trying to implement my Reordering list inside my card using react-beautiful-dnd library but I tried everything in a similar way from egghead.io courses but could not get it working. Here's my code:</p>
  
  <pre><code>    import React, { Component } from "react";
  import { Card, Badge } from "react-bootstrap";
  import "./projects.scss";
  import projectInfo1 from "../../jsonData/projects1";
  import { IconContext } from "react-icons";
  import { FiPlus } from "react-icons/fi";
  import { Droppable, DragDropContext, Draggable } from "react-beautiful-dnd";
  
  class Projects extends Component {
    constructor(props) {
      super(props);
      this.state = {};
      this.onDragEnd = this.onDragEnd.bind(this);
      this.onDragStart = this.onDragStart.bind(this);
    }
    onDragEnd = result =&gt; {};
    onDragStart = result =&gt; {};
  
    render() {
      return (
        &lt;div className="projectCards"&gt;
          {projectInfo1.projectsOrder.map((projectID) =&gt; {
            const project = projectInfo1.projects[projectID];
            return (
              &lt;DragDropContext onDragEnd={this.onDragEnd} onDragStart={this.onDragStart}&gt;
              &lt;Card className="projectCard" bg="light" style={{ width: "21rem" }} key={project.id}&gt;
                  &lt;Card.Header color="#366FF0" className="projectcardheader"&gt;
                    {project.projectName}
                  &lt;/Card.Header&gt;
                  &lt;Droppable droppableId={project.id}&gt;
                    {(provided) =&gt; (
                      &lt;div
                        className="cardcontent"
                        innerRef={provided.innerRef}
                        {...provided.droppableProps}
                      &gt;
                        {project.topics.map((j, index) =&gt; {
                          return (
                            &lt;Draggable draggableId={j.id} index={index}&gt;
                              {(provided) =&gt; (
                                &lt;Card
                                  key={j.id}
                                  className="topicscard"
                                  {...provided.draggableProps}
                                  {...provided.dragHandleProps}
                                  innerRef={provided.innerRef}
                                &gt;
                                  &lt;Card.Title className="topicsheading"&gt;
                                    {j.topicName}
                                  &lt;/Card.Title&gt;
                                  &lt;Card.Text className="topicdescription"&gt;
                                    {j.topicDescription}
                                  &lt;/Card.Text&gt;
                                  &lt;div&gt;
                                    {j.topicTags ? (
                                      j.topicTags.map((k) =&gt; {
                                        return (
                                          &lt;Badge
                                            variant="primary"
                                            className="tags"
                                          &gt;
                                            {k}
                                          &lt;/Badge&gt;
                                        );
                                      })
                                    ) : (
                                      &lt;Badge variant="primary"&gt;&lt;/Badge&gt;
                                    )}
                                  &lt;/div&gt;
                                &lt;/Card&gt;
                              )}
  
                            &lt;/Draggable&gt;
                          );
                        })}
                        {provided.placeholder}
                      &lt;/div&gt;
                    )}
                  &lt;/Droppable&gt;
                  &lt;div className="addnewcard"&gt;
                    &lt;IconContext.Provider
                      value={{
                        style: { verticalAlign: "middle" },
                        className: "reacticon",
                      }}
                    &gt;
                      &lt;FiPlus /&gt;
                    &lt;/IconContext.Provider&gt;{" "}
                    Add another discussion
                  &lt;/div&gt;
              &lt;/Card&gt;
              &lt;/DragDropContext&gt;
            );
          })}
        &lt;/div&gt;
      );
    }
  }
  export default Projects;
  </code></pre>
  
  <p>Also I'm attaching a photo, its just showing drag cursor on hovering over the card, but nothing happens on drag, any help will save me!</p>
  
  <pre><code>const projectsInfo1 = {
  
      projectsOrder:['Project-2','Project-1','Project-5','Project-4','Project-3'],
      projects: {
        'Project-1':{
          projectName: "Project 1",
          id:"p1",
          topics:[{
              id:"p1t1",
              topicName: "Adding a feature: GSoC1",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",      
              topicTags:['ReactJs','NodeJS']
          },
          {   id:'p1t2',
              topicName: "Adding a feature: GSoC2",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
              topicTags:['ReactJs','NodeJS']     
          },
          {   id:'p1t3',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
              topicTags:['ReactJs','NodeJS']      
          },
          {   id: 'p1t4',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
              topicTags:['ReactJs','NodeJS']      
          }],
        },
        'Project-2':{
          projectName: "Project 2",
          id:'p2',
          topics:[{
              id:'p2t1',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p2t2',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p2t3',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p2t4',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          }],
        },
        'Project-3':{
          projectName: "Project 3",
          id:'p3',
          topics:[{
              id:'p3t1',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p3t2',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p3t3',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p3t4',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          }],
        },
        'Project-4':{
          projectName: "Project 4",
          id:'p4',
          topics:[{
              id:'p4t1',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p4t2',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p4t3',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p4t4',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          }],
        },
        'Project-5':{
          projectName: "Project 5",
          id:'p5',
          topics:[{
              id:'p5t1',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p5t2',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p5t3',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          },
          {   id:'p5t4',
              topicName: "Adding a feature: GSoC",
              topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content."      
          }],
        },
      },
    };
  
    export default projectsInfo1;
  </code></pre>