Событие dragOver не выделяет полностью карточку в drop&down в react

У меня есть карточки с данными. Нужно, чтобы когда одну из них перетаскивали, при наведении на другую, другая полностью становилась красная. И снова белая, когда бы ее отпускали. Но, при перетаскивании, только часть карточки становится красной, дочерние элементы не окрашиваются в красный. Окрашиваются, когда уже до них дошло наложение. Мне нужно, чтобы дочерние элементы тоже окрашивались. Т.е., чтобы она полностью была красной.

            <div
              className="myListPostContainer"
              draggable={true}
              onDragStart={(e) => this.dragStart(e, index)}
              onDragLeave={(e) => this.dragLeave(e)}
              onDragOver={(e) => this.dragOver(e)}
              onDrop={(e) => this.dragDrop(e, index)}
            >
              <MyListPosts activityKey={key} index={index} />
            </div>

И сами события

dragLeave = (e) => {
    e.target.style.background = "white";
  };

  dragOver = (e) => {
    e.preventDefault();
    e.target.style.background = "red";
  };
  dragDrop = (e, index) => {   
  e.preventDefault(); 
    e.target.style.background = "white";
  };

Такой вариант помог выделить большую часть, но подэлементы все равно не выделяются. Как вариант, прописывать каждый в условие, но тоже не работает.

 if (
      //e.target.className === "myListPostsItem"
      e.target.classList.contains("MyListPosts-myListCard-33")
      // ||      e.target.classList.contains("MyListPosts-myListActivity-34")
    ) {
      e.target.style.background = "red";
    }