React beautiful dnd - making draggables to skip a component

I've been using react dnd and to generate a list of draggable items inside a tab:

The ad component you see in the middle is NOT a draggable (see code below). What happens when I drag and switch places with items next to the ad component, the items overlap it:

How can I cause the items to only switch places with themselves and 'skip' the ad component? Adding the code below Thanks!!

data.items.map((item, index) => !item.delete &&
          (
            <React.Fragment>
              { ad && ad.displayIndex === index &&
                <div
                  className={classNames({
                    [styles.itemListAdContainer]      : !isAdRemoved,
                    [mobileStyles.itemListAdContainer]: !isAdRemoved,
                    })}
                >
                  { !isAdRemoved &&
                    <ItemListAd
                      data={ad.data}
                      onClose={() => this.setState({ isAdRemoved: true })}
                    /> }
                </div>
              }

              <Draggable
                key={item.id}
                draggableId={item.id}
                index={index}
              >
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    <Item
                      showDivider={ad.displayIndex !== index + 1 || isAdRemoved}
                      data={item}
                      key={item.id}
                      onChange={data => onItemChange(item, data)}
                    />
                  </div>
                )}
              </Draggable>
            </React.Fragment>
        ))

This is the map function rendering the items inside the category\tab component (the big container). The whole category\tab component is a droppable