title: How to avoid an event bubbling in nested components with React DnD Beautiful Library?
body: <p>I have a problem with event bubbling. I'm using React DnD Beautiful to sort a vertical list.
  I have a list of collections and within each collection there is a nested list of services.</p>
  <p>I can either drag and drop collections to sort them vertically or drag and drop services only within a correspondent collection to sort them as well.</p>
  <p>When I drag collections, everything is working properly. But when I try to drag services, sometimes instead of grabbing a service, I grab a whole collection. It happens due to an event bubbling. Usually, I would solve the problem with e.stopPropagation(), but it seems not to work.</p>
  <p>React DnD Beautiful uses {...provided.dragHandleProps} where they, for instance, handle onDragStart. I tried to customize it, but it didn't work. I wonder, whether I'm just customizing it wrong?</p>
  <p>Beneath is a pseudocode.</p>
  <p>COLLECTION LIST</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function SortableCollectionsList() {
      const styles = useStyles();
      const {sortedCollections, onDragEnd} = useSortedCollections()
      return (
          &lt;div className={"collectionListWrapper"}&gt;
              &lt;DragDropContext onDragEnd={onDragEnd}&gt;
                  &lt;Droppable droppableId="droppable" direction="vertical"&gt;
                      {(provided, snapshot) =&gt; (
                          // List of all collections
                          &lt;List
                              ref={provided.innerRef}
                              {...provided.droppableProps}
                              aria-labelledby="nested-list-subheader"
                              subheader={
                                  &lt;ListSubheader component="div" id="nested-list-subheader"&gt;
                                      Drag and drop collections and services
                                  &lt;/ListSubheader&gt;
                              }
                              className={styles.root}
                          &gt;
                              {sortedCollections
                                  .map(({id, name, showName, logo, services: serviceIds}, index) =&gt;
                                      &lt;Draggable key={id} draggableId={id} index={index}&gt;
                                          {(provided, snapshot) =&gt; (
                                              &lt;&gt;
                                                  {/*One collection containing a list of services*/}
                                                  &lt;ListItem key={id}
                                                            ref={provided.innerRef}
                                                            {...provided.draggableProps}
                                                            {...provided.dragHandleProps}
                                                            onDragStart={(e) =&gt; {
                                                                e.stopPropagation(),
                                                                    provided.dragHandleProps.onDragStart(e),
                                                                    console.log("collections stop propagation")
                                                            }}
                                                      
                                                            className={styles.collection}
                                                  &gt;
                                                      {/*List of services within one collection*/}
                                                      &lt;SortableServicesList {...{
                                                          serviceIds,
                                                          collectionId: id,
                                                          title: name
                                                      }}/&gt;
                                                  &lt;/ListItem&gt;
                                              &lt;/&gt;
                                          )}
                                      &lt;/Draggable&gt;
                                  )}
                              {provided.placeholder}
                          &lt;/List&gt;
                      )}
                  &lt;/Droppable&gt;
              &lt;/DragDropContext&gt;
          &lt;/div&gt;
      )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>SERVICES WITHIN EACH COLLECTION</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function SortableServicesList({serviceIds, collectionId, title}) {
      const {sortedServices, onDragEnd} = useSortedServices(serviceIds, collectionId)
  
      const classes = useStyles();
      const [open, setOpen] = React.useState(true);
  
      const handleClick = () =&gt; {
          setOpen(!open);
      };
  
      return (
          // A collection LIST (one list) of services
          &lt;List
              component="nav"
              aria-labelledby="nested-list-subheader"
              className={classes.root}
          &gt;
              &lt;ListItem button onClick={handleClick}&gt;
                  &lt;DragIndicatorIcon fontSize="small"/&gt;
                  &lt;ListItemText primary={title}/&gt;
                  {open ? &lt;ExpandLess/&gt; : &lt;ExpandMore/&gt;}
              &lt;/ListItem&gt;
  
              &lt;Collapse in={open} timeout="auto" unmountOnExit&gt;
                  &lt;DragDropContext onDragEnd={onDragEnd}&gt;
                      &lt;Droppable droppableId="droppable" direction="vertical"&gt;
                          {(provided, snapshot) =&gt; (
                              // LIST AS A DROPPABLE CONTAINER FOR THE SERVICES
                              &lt;List ref={provided.innerRef}
                                    style={getContainerStyle(snapshot.isDraggingOver)}
                                    {...provided.droppableProps}
                                    className="collectionItems"
                                    component="div"
                                    disablePadding
                              &gt;
                                  {sortedServices
                                      .map(({id, name}, index) =&gt;
  
                                          // A LIST ITEM AS A DRAGGABLE SERVICE
                                          &lt;Draggable key={id} draggableId={id} index={index}&gt;
                                              {(provided, snapshot) =&gt; (
                                                  &lt;&gt;
                                                      &lt;ListItem button
                                                                key={id}
                                                                ref={provided.innerRef}
                                                                {...provided.draggableProps}
                                                                {...provided.dragHandleProps}
                                                                onDragStart={(e) =&gt; {
                                                                    e.stopPropagation(),
                                                                        provided.dragHandleProps.onDragStart(e),
                                                                    console.log("services stop propagation")
                                                                }}
                                                                style={getServiceCardStyle(
                                                                    snapshot.isDragging,
                                                                    provided.draggableProps.style,
                                                                )}
                                                                className={classes.nested}
                                                      &gt;
                                                          &lt;DragIndicatorIcon fontSize="small"/&gt;
                                                          &lt;ListItemText primary={name}/&gt;
                                                      &lt;/ListItem&gt;
                                                  &lt;/&gt;
                                              )}
                                          &lt;/Draggable&gt;
                                      )}
                                  {provided.placeholder}
                              &lt;/List&gt;
                          )}
                      &lt;/Droppable&gt;
                  &lt;/DragDropContext&gt;
              &lt;/Collapse&gt;
          &lt;/List&gt;
      )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>As you can observe, I'm also confused where should I define my custom event. For now, I just did the same for both collections and services, namely this:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>onDragStart={(e) =&gt; {
                                                                    e.stopPropagation(),
                                                                        provided.dragHandleProps.onDragStart(e),
                                                                    console.log("services stop propagation")
                                                                }}</code></pre>
  </div>
  </div>
  </p>
  <p>And also it doesn't console.log() anything.</p>
  <p>Ty for your help. I'm actually a beginner and it is very confusing for me, even if it is easy.</p>