title: Unable to install react-beautiful-dnd package
body: <p>*<strong>Below is the full error stack message while installing the package</strong></p>
  <pre><code>npm ERR! code ERESOLVE
  npm ERR! ERESOLVE unable to resolve dependency tree
  npm ERR!
  npm ERR! While resolving: freeboard@0.1.0
  npm ERR! Found: react@17.0.1
  npm ERR! node_modules/react
  npm ERR!   react@&quot;^17.0.1&quot; from the root project
  npm ERR!
  npm ERR! Could not resolve dependency:
  npm ERR! peer react@&quot;^16.8.5&quot; from react-beautiful-dnd@13.0.0
  npm ERR! node_modules/react-beautiful-dnd
  npm ERR!   react-beautiful-dnd@&quot;^13.0.0&quot; from the root project
  npm ERR!
  npm ERR! Fix the upstream dependency conflict, or retry
  npm ERR! this command with --force, or --legacy-peer-deps
  npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
  </code></pre>
  <p><strong>Here is the complete code using the dragdropcontext and droppable from the package, the full component Main.
  Here is the complete code using the dragdropcontext and droppable from the package, the full component Main.</strong></p>
  <pre><code>import { connect } from &quot;react-redux&quot;
  import { DragDropContext, Droppable } from 'react-beautiful-dnd';
  
  
  import SingleTask from &quot;../SingleTask/SingleTask&quot;
  
  import &quot;./Main.css&quot;
  
  const Main = (props) =&gt; {
  
      const [tasks, setTasks] = useState([])
  
      useEffect(() =&gt; {
          setTasks(...[props.tasks])
      },[props])
  
  
      return (
          &lt;&gt;
          &lt;DragDropContext&gt;
              &lt;Droppable droppableId=&quot;Box1&quot;&gt;
                  {(provided) =&gt; (    
                      &lt;div {...provided.droppableProps} ref={provided.innerRef}&gt;
                          {provided.placeholder}
                          &lt;div className=&quot;main-board&quot;&gt;
                              &lt;h2&gt;FreeBoard&lt;/h2&gt;
  
                              { tasks &amp;&amp; tasks.map((task, index) =&gt; {
                                  return (
                                      &lt;div className=&quot;tasks-list&quot; key={index}&gt;
                                          &lt;SingleTask taskName={task} indexCount={index}/&gt;
                                      &lt;/div&gt;
                                  )
                              }) }
                          &lt;/div&gt;
                      &lt;/div&gt;
                  )}
              &lt;/Droppable&gt;
          &lt;/DragDropContext&gt;
          &lt;/&gt;
      )
  }
  
  const mapStateToProps = state =&gt; {
      return state
  }
  
  export default connect(mapStateToProps)(Main)
  </code></pre>