*Expected behavior*To rearrange the items in my list after I grab the item and place it in the desired place.

*Actual behavior*If I grab an item that has html tags in it, it gives me an error saying Cannot read properties of undefined (reading 'getAttribute'). It works properly only if I grab it by the white space. But you click on any text or image the error occurs.

Resources (screenshots, code snippets etc.)

 <MDBSortable className="menu-wrapper">
          <div className="menu-qr-div">
            <p className="menu-qr-title menu-qr-page" id=" ">
              Limonada
            </p>
            <IconAdd onClick={toggleAddMenu} />
          </div>
          <MDBSortableElement className="menu-qr-item">
            <div className="tooltip-item-image"></div>
            <div className="menu-qr-item-name">
              <span>Espresso</span>
              <p>( cafea arabica )</p>
            </div>
            <div className="menu-qr-item-name menu-item-last-name">
              <span>15 lei</span>
              <p>60 ml</p>
            </div>
          </MDBSortableElement>

          <MDBSortableElement className="menu-qr-item">
            <div className="tooltip-item-image"></div>
            <div className="menu-qr-item-name">
              <span>Flat White</span>
              <p>( cafea arabica )</p>
            </div>
            <div className="menu-qr-item-name menu-item-last-name">
              <span>16 lei</span>
              <p>60 ml</p>
            </div>
          </MDBSortableElement>

          <MDBSortableElement className="menu-qr-item">
            <div className="tooltip-item-image"></div>
            <div className="menu-qr-item-name">
              <span>Cappucino</span>
              <p>( cafea arabica )</p>
            </div>
            <div className="menu-qr-item-name menu-item-last-name">
              <span>17 lei</span>
              <p>60 ml</p>
            </div>
          </MDBSortableElement>
        </MDBSortable>