Я обнаружил, что React.js будет конденсировать HTML-теги JSX-компонентов при рендеринге. Можно ли этого избежать?

Например, у меня есть компонент jsx, определенный следующим образом:

<div id="wrapper">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

после рендеринга он отображается в браузере следующим образом:

<div id="wrapper"><span>1</span><span>2</span><span>3</span></div>

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

И разница между сжатым и неконденсированным кодом:

не конденсированные:

конденсируется:

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

Может быть, это смешно и не имеет смысла делать это, но я все равно ценю любую помощь, спасибо!