Реагирующая группа переходов добавляет элементы при переходе, поэтому css перерывы сетки

Question

Группа React transition генерирует элементы в DOM, которые разрушают мою сетку CSS, пока исчезают. Сетка имеет 6 ячеек и не может иметь больше.

Код переходной группы

const transitionsNames = {
    enter: classes["animation-enter"],
    enterActive: classes["animation-enter-active"],
    leave: classes["animation-leave"],
    leaveActive: classes["animation-leave-active"]
}

<ReactCSSTransitionGroup
    component={React.Fragment}
    transitionName={transitionsNames}
    transitionEnterTimeout={500}
    transitionLeaveTimeout={500}>
    {data.map(item => <Card code={item.code} element_type={"item"} key={Math.random()}/>)}
</ReactCSSTransitionGroup>

Анимация css:

.animation-enter {
  opacity: 0;
  transform: scale(0);
}

.animation-enter.animation-enter-active {
  opacity: 1;
  transform: scale(1);
  transition: all 500ms;
}

.animation-leave {
  transform: scale(1);
  opacity: 1;
}

.animation-leave.animation-leave-active {
  opacity: 0;
  transform: scale(0);
  transition: all 500ms;
}

Сетка css:

  display: grid;
  grid-template-columns: repeat(6, 17rem);
  justify-content: center;
  grid-column-gap: 7rem;

Я думаю, что это возможно сделать с абсолютным позиционированием, но не могу понять, как это сделать.

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