Как использовать в react созданный DOM объект JS и надо ли

Допустим, пример с таймером: https://ru.reactjs.org/docs/rendering-elements.html

Я создаю:

function getTime(time){
   let div = document.createElement('div');
   let h1 = document.createElement('h1');
   h1.innerText = 'Привет!'

   let h2 = document.createElement('h2');
   h2.innerText = 'Точное время: '+time;

   div.append(h1);
   div.append(h2);

   div = div.outerHTML;

   return div;
}

function tick() {
  let time = new Date().toLocaleTimeString();
  const element = getTime(time);
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Т.е. заменяю

 (
   <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
   </div>
 );

на функцию

getTime(time)

На выходе получаю

<div><h1>Привет!</h1><h2>Точное время: 16:03:59</h2></div>

Вместе с html тегами

Вопросы:

1. Как получить верстку место строки?
2. Насколько это оправданно, если я хочу создавать целые блоки на чистом JS?