В чем проблема создания дополнительного div элемента?

Лишний div сам по себе не катастрофа, но избыточные обёртки создают ряд проблем.

Проблемы

• Ломается раскладка. Лишний div между flex- или grid-контейнером и его детьми — и дети перестают быть flex-элементами, gap и выравнивание не работают.
• Ломается семантика. div внутри ul (вместо li), внутри table или между dl и dt делает разметку невалидной, а скринридеры неправильно читают списки и таблицы.
• Больше DOM. Глубокое дерево — дольше пересчёт стилей и раскладки, сложнее селекторы.
• Сложнее поддерживать — труднее понять структуру.

Как избежать

• в React — фрагменты вместо обёрток:

return (
  <>
    <dt>Имя</dt>
    <dd>Анна</dd>
  </>
);

• использовать семантические теги вместо безымянных обёрток;
• display: contents, если обёртка нужна в разметке, но не в раскладке (осторожно с доступностью).

Коротко для собеседования

Лишний div ломает flex/grid и семантику списков и таблиц, увеличивает DOM; решение — фрагменты и семантические теги.

Подробнее: React — Fragment